第一种情况就是宽高都写在样式表里，就比如#div1{width:120px;}。这中情况通过#div1.style.width拿不到宽度，而通过#div1.offsetWidth才可以获取到宽度。

第二种情况就是宽和高是写在行内中，比如style="width:120px;"，这中情况通过上述2个方法都能拿到宽度。

小结，因为id.offsetWidth和id.offsetHeight无视样式写在样式表还是行内，所以我们获取元素宽和高的时候最好用这2个属性。注意如果不是写在行内style中的属性都不能通过id.style.atrr来获取。

现 在的前端制作很少直接把样式写style里了，都是写在样式表里。如果你要获取的样式没有相对应的（就像#div1.style.width对 应#div1.offsetWidth），就只能分别针对不用浏览器来获取样式表的属性了，可以试着搜索“JS 获取样式属性”之类的。

js 获取元素宽的更多相关文章

  1. JS获取元素宽高的两种情况

    JS获取元素宽高分两种情况, 一.内联样式,也就是直接把width和height写在HTML元素中的style里: 这种情况使用     document.getElementById('xxx'). ...

  2. 原生JS获取元素宽高实践详解

    开篇的话 任何不是亲身实践中求得的知识,都不是属于你的.任何求得的知识不去时常温习运用,也不是属于你的. 记录由来 在做个上拉广告功能中遇到了一个"理所当然"觉得对的用法,慢慢才排 ...

  3. js 获取元素宽高

    可以用源生js的.offsetHeight .offsetWidth属性 document.getElementById("temp_form").offsetHeight // ...

  4. js获取元素宽高、位置相关知识汇总

    常见clientWidth.clientHeight.offsetWidth.offsetLeft,clientX.scrollTop等词语,比较混乱,现在总结下他们的区别. 1. clientWid ...

  5. JS获取网页宽高方法集合

    JS获取网页宽高等方法的集合:document.body.clientWidth - 网页可见区域宽document.body.clientHeight - 网页可见区域高 document.body ...

  6. 【全面总结】js获取元素位置大小

    [js获取元素位置+元素大小]全面总结 目录 1.关于offset offsetParent(只读) offsetTop(只读) offsetLeft(只读) offsetHeight(只读) off ...

  7. js获取元素位置和style的兼容性写法

    今天说一下js获取元素位置和style的方法.当然不只是element.style那么简单.. 主角:getBoundingClientRect,getClientRects,getComputedS ...

  8. js获取元素提示信息

    js获取元素提示信息 var date=$("#date").attr('placeholder'); js修改元素的提示信息 $("#date").attr( ...

  9. js获取元素显示隐藏的当前状态

    js获取元素显示隐藏的当前状态 // CSS var display = $("."+cls).css("display"); if(display == &q ...

随机推荐

  1. java线程小结1

    1.创建线程的两种方法 新线程的创建和启动都是通过java代码触发的.除了第一个线程(也就是启动程序的.运行main()方法的线程)是由java平台直接创建的之外,其余的线程都是在java代码中通过“ ...

  2. Oracle_trunc截取函数

    转:http://blog.sina.com.cn/s/blog_6b58d2fa0100r6ub.html TRUNC函数用于对值进行截断. 用法有两种:TRUNC(NUMBER)表示截断数字,TR ...

  3. form表单4种提交方式

    <!DOCTYPE html><html> <head> <title>JavaScript表单提交四种方式</title> <met ...

  4. 使用curl 命令模拟POST/GET请求

    https://blog.csdn.net/u012340794/article/details/71440604 curl命令是一个利用URL规则在命令行下工作的文件传输工具.它支持文件的上传和下载 ...

  5. [Cannot deserialize JSON array into type] NewtonSoft.Json解析数据出错原因

    今天用NewtonSoft.JSon解析一个天气数据,数据格式如: {"status":1,"detail":"\u6570\u636e\u83b7\ ...

  6. 哆啦A梦里的某一首诗

    <哆啦A梦>长篇<宇宙开拓>主题曲<放松心情>作词:武田铁矢 我终于发现, /昨日失去的一切, /虽然还无法完全意会, /可是对我却非常重要. /加紧脚步追赶, / ...

  7. jar包错误

    Exception in thread "main" java.lang.NoSuchMethodError: org.slf4j.spi.LocationAwareLogger. ...

  8. React 学习参考资料链接

    node.js官网https://nodejs.org/en/download/ React 入门实例教程http://www.ruanyifeng.com/blog/2015/03/react.ht ...

  9. 安装MySQL 5.6

    记录安装mysql 5.6的全过程 下载安装包(尝试过使用mysql的yum源去安装--如果你的网络够好的话...) 注:我的系统是Centos 7.2的 如下,根据自己的需求去下载 CentOS L ...

  10. 并发-ThreadLocal源码分析

    ThreadLocal源码分析 参考: http://www.cnblogs.com/dolphin0520/p/3920407.html https://www.cnblogs.com/coshah ...