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. Powershell(3)

    Powershell 可以使用powershell管理的服务 share point, exchange, lync, windows azure, window server, system cen ...

  2. URAL 1145—— Rope in the Labyrinth——————【求树的直径】

    Rope in the Labyrinth Time Limit:500MS     Memory Limit:65536KB     64bit IO Format:%I64d & %I64 ...

  3. 导入的项目eclipse出现乱码的处理方法

    如果这样子还是出现乱码无法解决的话,则删掉当前项目重新开始项目.

  4. C#窗体控件GroupBox修改边框色

    控件Group Box默认的边框的颜色是白色的,在很多时候显得不那么突出.但默认的属性列表里面并没有提供相应的接口.所以只能借助重绘事件. 网上很多都说使用 OnPaint 事件,但是我在事件列表中没 ...

  5. Spring-cloud之Ribbon负载均衡的使用及负载均衡策略配置(与Eurka配合使用)

    什么是Ribbon,ribbon有什么用,个人先总结一下(不正确请提出讨论):Ribbon是基于客户端的负载均衡器,为我们提供了多样的负载均衡的方案,比如轮询,最小的并发请求的server,随机ser ...

  6. time和datetime模块

    在Python中,通常有这几种方式来表示时间: 1)时间戳 2)格式化的时间字符串  3)元组(struct_time)共九个元素. 由于Python的time模块实现主要调用C库,所以各个平台可能有 ...

  7. ES7的Async/Await的简单理解

    Async/Await 的个人见解 正文: async,顾名思义,一个异步执行的功能,而 await 则是配合 async 使用的另一个关键字,也是闻字识其意,就是叫你等待啦! 二者配合食用效果更佳哦 ...

  8. PHP : 封装Mysqli的连接、关闭和增改查(面向过程)

    废话不多说,直接上图和案例:(看行数进行拼接) 注意:连接数据库中,因为用了$CONNECT全局变量,所以我们的连接数据库封装方法必须要执行了才能获取到此全局变量的值 所引入的数据库文件(databa ...

  9. Selenium入门20 等待时间

    自动化过程中有的页面元素加载慢或者需要等待特定条件执行后续步骤,此时需添加等待时间: 1 time.sleep()  固定等待时间,需import time 2 webdriver隐式等待 无需引入包 ...

  10. C++学习之虚函数继承和虚继承

    虚函数的定义要遵循以下重要规则: 1.如果虚函数在基类与派生类中出现,仅仅是名字相同,而形式参数不同,或者是返回类型不同,那么即使加上了virtual关键字,也是不会进行晚绑定的. 2.只有类的成员函 ...