1、示例代码

（1）html

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>js获取宽度</title>

        <style type="text/css">

            #app{

                width: 300px !important;

            }

        </style>

        <link rel="stylesheet" type="text/css" href="css/style.css"/>

    </head>

    <body>

        <div id="app" style="width: 200px;">

            1

        </div>

        <script type="text/javascript">

            let app = document.getElementById('app')

            //不准确 只能获取内敛样式属性值

            console.log(app.style.width)

            //currentStyle:该属性只兼容IE（从IE6就开始兼容了）,不兼容火狐和谷歌

            // console.log(app.currentStyle.width)

            // getComputedStyle仅仅ie 6 7 8不支持

            console.log(window.getComputedStyle(app).width)

            // 返回300 单位是px。除了 width 和 height 外的属性都是相对于视口的左上角位置而言的

            console.log(app.getBoundingClientRect().width)

        </script>

    </body>

</html>

（2）css

#app{

    width: 100px;

}

2、方法区别

（1）dom.style.width

只能获取内敛样式。因此是不准确的。

（2）dom.currentStyle.width

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/currentStyle

Element.currentStyle 是一个与 window.getComputedStyle方法功能相同的属性。这个属性实现在旧版本的IE浏览器中。

（3）window.getComputedStyle(dom).width

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/getComputedStyle

Window.getComputedStyle()方法返回一个对象，该对象在应用活动样式表并解析这些值可能包含的任何基本计算后报告元素的所有CSS属性的值。因此输出的值是准确的。

但是有兼容性：

https://caniuse.com/#search=getComputedStyle

ie6-8不支持。

（4）dom.getBoundingClientRect().width

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect

返回值是一个 DOMRect 对象，这个对象是由该元素的 getClientRects() 方法返回的一组矩形的集合, 即：是与该元素相关的CSS 边框集合 。

DOMRect 对象包含了一组用于描述边框的只读属性——left、top、right和bottom，单位为像素。除了 width 和 height 外的属性都是相对于视口的左上角位置而言的。

低版本的IE也有兼容性问题：

https://caniuse.com/#search=getBoundingClientRect

有的浏览器不包含width和height属性。

元素高度、宽度获取 style currentStyle getComputedStyle getBoundingClientRect的更多相关文章

  1. jquery获取和设置元素高度宽度

    jquery获取和设置元素高度宽度 1.height()/ width() 取得第一个匹配元素当前计算的高度/宽度值(px) height(val)/ width(val) 为每个匹配的元素设置CSS ...

  2. js 元素高度宽度整理

    1.1只读属性 所谓的只读属性指的是DOM节点的固有属性,该属性只能通过js去获取而不能通过js去设置,而且获取的值是只有数字并不带单位的(px,em等),如下: 1)clientWidth和clie ...

  3. 浅谈style.,currentStyle,getComputedStyle,getAttribute

    xxx为属性. ele为元素. 1.style.是针对于样式 在前面的一篇博客中我也有说到,ele.style.xxx; 通常用于赋值,赋值也是针对于行内样式,用它来取值的话,它只能取到内联样式. 今 ...

  4. 用JS查看修改CSS样式（cssText,attribute('style'),currentStyle,getComputedStyle）

    CSS样式定义方法 大家都知道,在为HTML设置样式的时候,通常有三种方法:内联样式,内部样式表,外部样式表. 1.内联样式: 内联样式表就是在HTML元素中的行内直接添加style属性. <d ...

  5. style currentStyle getComputedStyle的区别和用法

    先介绍下层叠样式表的三种形式: 1.内联样式,在html标签中style属性设置. <p style="color:#f90">内联样式</p> 2.嵌入样 ...

  6. js 浏览器窗口大小改变 高度 宽度获取 window/document.height()区别

    <script> //当浏览器的窗口大小被改变时触发的事件window.onresize window.onresize = function(){ console.log($(windo ...

  7. jquery、js获取页面高度宽度等

    jquery获取页面高度宽度 //获取浏览器显示区域(可视区域)的高度 : $(window).height(); //获取浏览器显示区域(可视区域)的宽度 : $(window).width(); ...

  8. javascript获取style兼容性问题

    获取css 样式的方法有三种 : style, currentStyle , getComputedStyle style (无兼容性问题) 获取语法: ele.style.attr : 设置语法:e ...

  9. CSS父元素高度随子元素高度变化而变化

    <html> <body> <head> <style> #menu{width:1000px;overfloat:hidden;} /* width: ...

随机推荐

  1. Java 打包下载服务器上选中的文件或目录(带进度条提示)

    http://www.cnblogs.com/interdrp/p/6702482.html 由于此次文件管理系统的升级确实给我们带来了很多方便且在性能上有很大提升,经过这段时间的使用 也发现了些问题 ...

  2. 丑闻第三季 /全集Scandal迅雷下载

    丑闻 第三季 Scandal Season 3 (2013)本季看点:在经典美剧<老友记第一季>中饰演菲比的女星莉莎·库卓,即将加盟描写华府危机公关的ABC剧集<丑闻>(Sca ...

  3. Universal-Image-Loader解析（一）——ImageLoaderConfiguration的详细配置

    Universal-Image-Loader这个开源框架又来给我们造福了,它是一个图片加载框架,主要强大在于可以用于网络等图片源的加载,并且有多重缓存机制.先给出其项目地址:https://githu ...

  4. Apache Jmeter 教程

    Jmeter是一款优秀的开源测试工具, 是每个资深测试工程师,必须掌握的测试工具,熟练使用Jmeter能大大提高工作效率. 熟练使用Jmeter后, 能用Jmeter搞定的事情,你就不会使用LoadR ...

  5. ASP.NET Razor C# 和 VB 代码语法

    ylbtech-.NET: ASP.NET Razor  C# 和 VB 代码语法 Razor 不是一种编程语言.它是服务器端的标记语言. 1. C# 和 VB 代码语法返回顶部 Razor 同时支持 ...

  6. DLL文件实现窗体的模板模式

    机房合作版中第一次使用了模板方法,实现了类似窗体的界面和代码的复用..窗体继承有两种方法,一种是通过继承选择器从已编译的程序集合里选择,另一种则是通过DLL文件的方式继承.个人觉得DLL还是比较方便的 ...

  7. Linux下线程同步的几种方法

    Linux下提供了多种方式来处理线程同步,最常用的是互斥锁.条件变量和信号量. 一.互斥锁(mutex) 锁机制是同一时刻只允许一个线程执行一个关键部分的代码.  1. 初始化锁 int pthrea ...

  8. PPPOE数据包转换及SharpPcap应用

    在最近写的一个程序中需要用到Sniffer功能,但由于通过.net自身的Socket做出来的Sniffer不能达到实际应用的要求(如不能监听WIFI数据包)所以找到了WinPCAP的.NET库Shar ...

  9. AOP AspectJ 字节码 示例 Hugo MD

    Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...

  10. Sonar本地环境搭建

    一个新项目准备上线提测了,为了在提测之前做一下代码走查,同时了解项目目前的质量情况,就在本地搭建了一套sonar环境.搭建的过程中遇到了很多问题,sonar官方已不再维护Eclipse的svn插件,所 ...