js 获取width 的方法总结

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

2.然后顺便学习了下调用CSS样式表中元素的方法
var myCssdocument.styleSheets[i].rules[i] //styleSheets[i]指第i个,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(实际);

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

你可能感兴趣的:(笔记)