第一种情况就是宽高都写在样式表里，就比如#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. selenium的下拉选择框

    今天总结下selenium的下拉选择框.我们通常会遇到两种下拉框,一种使用的是html的标签select,另一种是使用input标签做的假下拉框. 后者我们通常的处理方式与其他的元素类似,点击或使用J ...

  2. linux 文本分析工具---awk命令(7/1)

    awk是一个强大的文本分析工具,相对于grep的查找,sed的编辑,awk在其对数据分析并生成报告时,显得尤为强大.简单来说awk就是把文件逐行的读入,以空格为默认分隔符将每行切片,切开的部分再进行各 ...

  3. Mysql字段属性应该尽量设置为not null

    除非你有一个很特别的原因去使用 NULL 值,你应该总是让你的字段保持 NOT NULL.这看起来好像有点争议,请往下看. 所谓的NULL就是什么都没有,连\0都没有,\0在字符串中是结束符,但是在物 ...

  4. Mspec

    Machine.Specifications Machine.Specifications (MSpec) is a context/specification framework that remo ...

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

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

  6. Saltstack sls文件：批量添加删除计划任务

    一.使用sls文件 批量添加计划任务 1.创建salt目录 mkdir /srv/{salt,pillar} 2.再salt目录下创建文件 vim crontab.sls 3.添加内容 # 添加的命令 ...

  7. Oracle数据库PLSQL的中文乱码显示全是问号

    plsql连接数据库乱码问题 缘由: 小师妹周末叫我帮她重装数据库,这么大好的周末时光不出去玩儿,给她装数据库这不是很蛋疼么. 我问她为什么要重装,她说:数据存入数据库后,中文字符有乱码,一定是我上次 ...

  8. React之JSX语法

    1. JSX的介绍   JSX(JavaScript XML)——一种在React组件内部构建标签的类XML语法.react在不使用JSX的情况下一样可以工作,然而使用JSX可以提高组件的可读性,因此 ...

  9. try中的return语句，在finally前执行还是在finally后执行？

    try中有的return语句,也有finally语句,请问finally是否执行,如果执行的话finally在return前执行还是在return后执行? 答案:finally的内容会执行,并且在re ...

  10. scjp考试准备 - 8 - final关键字

    题目,如下代码的执行结果: import java.util.ArrayList; class Pizza{ ArrayList toppings; public final void addTopp ...