第一种情况就是宽高都写在样式表里，就比如#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. rails timeout 异常

    发现经常有”超时“的错误信息,如/usr/lib/ruby/1.8/timeout.rb:54:in `rbuf_fill': execution expired (Timeout::Error),恩 ...

  2. [翻译]Feedback on the Go Challenge solutions

    第一次Go Challenge比赛,中国区只有3人参赛. 赛后收到邮件,是一个审阅者的反馈,“Feedback on the Go Challenge solutions”,摘录如下: 保持简单粗暴 ...

  3. Oracle数据库安全（二）资源限制于口令管理

    一.资源限制与口令管理概述 1.概要文件介绍: 在Oracle数据库中,用户对数据库和系统资源使用的限制以及对用户口令的管理的是建立概要文件实现的.它是Oracle数据库安全策略的重要组成不封.每个数 ...

  4. svn如何给新文件加锁

    第一步: 右键subversion(版本控制) 第二部:找到 subversion properties 第二部: add进行添加

  5. input-file 部分手机不能拍照问题

    曾经遇到一个需求,用户拍身份证上传验证, 然后我卡在了拍照这个点上. 最初采用的是微信的 api,wx.chooseImage, 但随后发现,返回的是一种只有微信才能预览的 url 格式, 但验证是要 ...

  6. mysql配置文件生效顺序

    安装完数据库 除了将my.cnf放在/etc/下放在其他地方也是可以的 cp /usr/share/mysql/my-default.cnf /etc/my.cnf 今天就看一下这些my.cnf是怎么 ...

  7. zip无法解压

    使用unzip解压,提示 [root@iZ28g3behi3Z html]# unzip /var/www/html/deyizhonggong.zipArchive:  /var/www/html/ ...

  8. C# 实现汉字转拼音

    /// <summary> /// 生成拼音简码 /// </summary> /// <param name="unicodeString"> ...

  9. 不常用的gcd公式

    gcd(a^m-b^m,a^n-b^n)=a^(gcd(m,n))-b^(gcd(m,n))

  10. 配置可对外链接的Redis

    链接服务器的Redis telnet 192.168.1.200 6379 Trying 192.168.1.200... telnet: Unable to connect to remote ho ...