js 获取width 的方法总结

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
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值