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

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

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

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

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

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

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

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

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

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

  5. Vue中获取dom元素

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

  6. JavaScript中获取html元素常用手法和区分

    对于许多前端开发项目来说,获取元素进行操作是必不可少的,例如tab标签,全屏切换,自动滚播等效果都需要通过获取节点元素来实现.下面我来总结下JavaScript最常用的4个Document对象中获取元 ...

  7. Vue自定义指令获取DOM元素

    我们知道,Vue.js的核心是数据驱动,当数据有所变化时,DOM就会被更新,比如: <span v-text="msg"></span> export de ...

  8. JavaScript获取DOM元素位置和尺寸大小

      在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果,这种时候我们经常会用到一些元素位置和尺寸的计算,浏览器兼容性问题也是不可忽略的一部分,要想写出预想效果的JavaScri ...

  9. JS1 js获取dom元素方法

     js获取dom元素方法  1.通过ID选取元素(getElementById) 1)使用方法:document.getElementById("domId")         其 ...

随机推荐

  1. Cannot convert value '0000-00-00 00:00:00' from column 1 to TIMESTAMP解决办法

    在Mysql数据库中使用DATETIME类型来存储时间,使用JDBC中读取这个字段的时候,应该使用 ResultSet.getTimestamp(),这样会得到一个java.sql.Timestamp ...

  2. HDU 5335——Walk Out——————【贪心】

    Walk Out Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total Su ...

  3. C++ stl vector介绍

    转自: STL vector用法介绍 介绍 这篇文章的目的是为了介绍std::vector,如何恰当地使用它们的成员函数等操作.本文中还讨论了条件函数和函数指针在迭代算法中使用,如在remove_if ...

  4. 读取和写入Cookies

    #region 读取或写入cookie 2 /// <summary> 3 /// 写cookie值 4 /// </summary> 5 /// <param name ...

  5. XHTML教会我的一些东西-1

    第一次写博客,虽然以前写作文是我的强项,我也很能说,但是似乎现在这种能力正在退化.不知为什么,到了大学之后我就变得跟以前不一样,似乎是回到了小学时的我.我在大学开始变得内向.沉默.不去主动和别人交谈. ...

  6. Python函数(2)

    一.函数对象 函数是第一类对象:指的是函数名指向的值可以被当作数据去使用. 1.函数可以被引用 例如: 2.可以当作参数传递给另一个函数 例如: 3.可以当作一个函数的返回值 例如: 4.可以当作容器 ...

  7. <Android 基础（十二）> TextInputLayout，让输入框更有灵性

    介绍 Layout which wraps an {@link android.widget.EditText} (or descendant) to show a floating label wh ...

  8. 解决 MVC4 Code First 数据迁移 数据库发生更改导致调试失败解决方法（二）

    文章转载自:http://www.cnblogs.com/amoniyibeizi/p/4486617.html 前几天学MVC过程中,遇到更改Model类以后,运行程序就会出现数据已更改的问题导致调 ...

  9. 解决javascript四舍五入不准确

    function roundFixed(num, fixed) { var pos = num.toString().indexOf('.'), decimal_places = num.toStri ...

  10. ActionMethod_DMI_动态方法调用

    Action执行的时候并不一定要执行execute方法可以在配置文件中配置Action的时候用method=来指定执行那个方法,也可以在url地址中动态指定(动态方法调用DMI)(推荐) 动态方法调用 ...