第一种情况就是宽高都写在样式表里，就比如#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. Github 的其他用法

    一.概述 Github 除了作为代码托管库外,有趣的程序员们还利用它解锁了有趣的新姿势. 二.新姿势 2.1 Github Pages 可以为项目建立静态主页(即gh-pages分支), 也可以建立命 ...

  2. Kattis - honey【DP】

    Kattis - honey[DP] 题意 有一只蜜蜂,在它的蜂房当中,蜂房是正六边形的,然后它要出去,但是它只能走N步,第N步的时候要回到起点,给出N, 求方案总数 思路 用DP 因为N == 14 ...

  3. initrd.img的压缩(制作)及解压的过程

    一.启动镜像initrd.img 文件类RedHat 系统从vmlinuz 核心引导后,会读取initrd.img 启动镜像.该文件中包含驱动模块等信息,是非常重要的文件.不同版本使用的格式不同.1. ...

  4. http://blog.csdn.net/dancing_night/article/details/46698853

    http://blog.csdn.net/dancing_night/article/details/46698853

  5. How to create a notification with NotificationCompat.Builder?AAAA

    Ask Question up vote 49 down vote favorite 19 I need to create a simple notification which will be s ...

  6. Mysql：实现分组查询拼接未分组同一字段字符group_concat()

    Mysql:实现分组查询拼接未分组同一字段字符group_concat() MySQL中,如果想实现将分组之后的多个数据合并到一列,可以使用group_concat函数,如下图所示: 在oralce中 ...

  7. jQuery动态网址标签

    在线演示 本地下载

  8. C++中的内存区[译文]

    C++ 中的内存区 Const Data: The const data area stores string literals and other data whose values are kno ...

  9. 正则表达式【TLCL】

    grep[global regular expression print] print lines matching a pattern grep [options] regex [file...] ...

  10. PasswordHasher 算法

    public override PasswordVerificationResult VerifyHashedPassword(string hashedPassword, string provid ...