javascript中获取dom元素高度和宽度的方法如下：

网页可见区域宽： document.body.clientWidth
网页可见区域高： document.body.clientHeight
网页可见区域宽： document.body.offsetWidth (包括边线的宽)
网页可见区域高： document.body.offsetHeight (包括边线的高)
网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight
网页被卷去的高： document.body.scrollTop
网页被卷去的左： document.body.scrollLeft

对应的dom元素的宽高有以下几个常用的：

元素的实际高度：document.getElementById("div").offsetHeight
元素的实际宽度：document.getElementById("div").offsetWidth
元素的实际距离左边界的距离：document.getElementById("div").offsetLeft
元素的实际距离上边界的距离：document.getElementById("div").offsetTop

javascript中获取dom元素高度和宽度的更多相关文章

  1. javascript中获取dom元素的高度和宽度

    javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...

  2. js | javascript中获取dom元素的高度和宽度

    javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...

  3. vue获取dom元素高度的方法

    获取高度: <div ref="自定义名称" > </div>要在钩子mounted里面dom结构生成后去获取dom的高度,宽度,修改样式等操作!!! mo ...

  4. 如何在onCreate中获取View的高度和宽度

    如何在onCreate中获取View的高度和宽度 原文链接:http://mp.weixin.qq.com/s?__biz=MzAwODE1NTI2MQ==&mid=2247483676&am ...

  5. Android 在OnCreate()中获取控件高度与宽度

    试过在OnCreate()中获取控件高度与宽度的童鞋都知道,getWidth()与getHeight()方法返回是0,具体原因 看一下Activity的生命周期 就会明白. 上代码: 方法一: int ...

  6. JavaScript中获取HTML元素的方式

    JavaScript中获取HTML元素的方式 1.使用id方式获取元素,返回一个具体对象   document.getElementById(id名) 2.使用className方式获取元素,返回类数 ...

  7. 20.Vue中获取DOM元素和组件

    1.获取DOM元素和组件:this.$refs

  8. web开发中获取的各种高度和宽度

    前端开发中经常需要获取页面还有屏幕的高度和宽度进行计算,此文即介绍如何用 JavaScript 还有 jQuery 获取这些尺寸. 1.简介 一个页面显示在浏览器内,浏览器又放置在屏幕窗口内,所以由里 ...

  9. Vue中获取dom元素

    Vue.js虽然说是数据驱动页面的,但是有时候我们也要获取dom对象进行一些操作. vue的不同版本获取dom对象的方法不一样 Vue.js  1.0版本中,通过v-el绑定,然后通过this.els ...

随机推荐

  1. HTTP协议的内容协商

    一.前言 我们在日常的抓包过程中经常可以看到以Accept开头的请求首部,比如:Accept-Language 有一个q值,肯定有人好奇在HTTP规范中为什么要定义这个q值:还有在响应首部有一个名为V ...

  2. web 开发人员必须学习的 3 门语言

    web 开发人员必须学习的 3 门语言:html  css  js HTML 定义了网页的内容 CSS 描述了网页的布局 JavaScript 网页的行为

  3. git revert后导致合并代码丢失

    起因 我有一个开发分支antd3.x和一个主分支develop,我在合并antd3.x到develop的时候发现有些修改没有合并进来. 查找问题 然后就去网上查,发现这篇文章<git合并丢失代码 ...

  4. PHP读取Excel类文件

    想要使用PHP读取Excel文件必然要用到PHPExcel开源类库,网上资源应该挺多的.但是每一种的操作必然都是不同的,可原理应该都是大同小异. 这个文件夹里包含的就是PHPExcel类文件,在外面还 ...

  5. ArcGIS农村土地承包经营权辅助建库软件说明书

    软件作者:闫磊  电话:18987281928 或13108507190 QQ:853740877,QQ交流群:236352926 1.    软件安装... 4 2.           系统整体界 ...

  6. 第一个JavaScript代码

    既然我们的CSS就必须要要放再专门的style标签内  那么javascript也需要放在子级的标签内,那就是script标签内 在页面中,我们可以在body标签中放入<script type= ...

  7. 8086 CPU 寄存器简介

    转载:http://www.cnblogs.com/BoyXiao/archive/2010/11/20/1882716.html 引子 打算写几篇稍近底层或者说是基础的博文,浅要介绍或者说是回顾一些 ...

  8. JFinal启动报错：Exception in thread "main" java.lang.NoClassDefFoundError: org/eclipse/jetty/server/Connector

    - 错误: Exception in thread "main" java.lang.NoClassDefFoundError: org/eclipse/jetty/server/ ...

  9. Nginx性能问题答疑

    为什么Nginx的总体性能比Apache高? Nginx使用的是epoll模型和kqueue的网络I/O模型Apache使用的是传统的select模型.目前linux的高并发场景使用的都是epoll模 ...

  10. [EffectiveC++]item23：Prefer non-member non-friend functions to member functions

    99页 导致较大封装性的是non-member non-friend函数,因为它并不增加“能否访问class内之private成分”的函数数量.