js 获取width 的方法总结

来源：互联网发布：dokuwiki nginx 编辑：程序博客网时间：2024/06/06 09:47

1.今天遇到了关于element.style.width的一个小问题记录下来！
习惯了通过HTML DOM来给元素进行赋值。
通常通过这种方法可以给元素进行赋值，在HTML上的表现是 width直接加在HTML页面上，优先级大于css样式表，所以可以赋值成功。
当我们取值时因为我们无法通过这个方法调用css样式表中的元素所以取值为空。

2.然后顺便学习了下调用CSS样式表中元素的方法
var myCssdocument.styleSheets[i].rules[i] //styleSheets[i]指第i个<style></style>，rules[i]指第i个class

myCss.style.width //表示你想取的属性，可以获取和修改

3.然后看到了一些其他的方法
element.currentStyle.width //指当前样式的width FF不支持
getComputedStyle(element,false).width //指获取完成样式的width IE不支持
兼容方法

function get(element,width){    if(element.currentStyle){        return element.currentStyle.width; //ie下先获取样式    }else{        return getComputedStyle(element,false).width; //FF下获取样式    }}

4.突然想到还有一种方法可以获取到不过有点差别
element.offsetWidth = width(可视)+border+padding+滚动条宽度;
element.clientWidth = width(可视)+padding;
element.scrollWidth = width(实际);

以上都是通过查找资料和实践获得，难免产生错误和引用别人的结论，只为学习交流有错误请指出！

2 0