改成w=woffsetWidth;
js获取Html元素的实际宽度高度
第一种情况就是宽高都写在样式表里，就比如#div1{width:120px;}。这中情况通过#div1stylewidth拿不到宽度，而通过#div1offsetWidth才可以获取到宽度。
第二种情况就是宽和高是写在行内中，比如style="width:120px;"，这中情况通过上述2个方法都能拿到宽度。
小结，因为idoffsetWidth和idoffsetHeight无视样式写在样式表还是行内，所以我们获取元素宽和高的时候最好用这2个属性。注意如果不是写在行内style中的属性都不能通过idstyleatrr来获取。
现在的前端制作很少直接把样式写style里了，都是写在样式表里。如果你要获取的样式没有相对应的（就像#div1stylewidth对 应#div1offsetWidth），就只能分别针对不用浏览器来获取样式表的属性了，可以试着搜索“JS 获取样式属性”之类的。
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>test</title>
<style>
#one {
color: red;
width: 150px;
border: 1px solid blue;
}
#but {
color: blue;
width: 100px;
border: 1px solid red;
}
</style>
<script>
function cssrule(a, b) {
var a = a || 0;
var b = b || 0;
if (!!documentall) {
return documentstyleSheets[a]rules[b]style;
} else {
return documentstyleSheets[a]cssRules[b]style;
}
}
consolelog(cssrule()width);
consoledebug(cssrule(0, 1)width);
windowonload = function() {
var one = documentgetElementById("one");
var but = documentgetElementById("but");
butonclick = function() {
oneclassName = 'div2';
}
}
</script>
</head>
<body>
<div id="one">11111111111111</div>
<div id="but">22222222222222</div>
</body>
</html>
是这样的，一开始需要获取某一个元素的 left 值，我就用 elestyleleft 去获取了（基础不扎实还好意思来丢人），然后居然返回的是空。
好吧，追本溯源，问题的根源以及区别就在这里了。
所以，我那样是获取不到某一个元素的一个其他方式设置的样式属性值的，所以我就打算谷歌一下别的方法了。
特点：
- 只可读，但是可以读取所有的样式属性值。但是不能通过该方法去设置样式属性值。
currentStyle 获取的是一个元素的所有的样式属性值，这一点功能是与 getComputedStyle() 一样的，但是在获取某一个具体的属性的时候，可以结合 getAttribute 来实现。
和 getComputedStyle 方法不同的是，currentStyle 要获得属性名的话必须采用驼峰式的写法。也就是如果我需要获取 font-size 属性，那么传入的参数应该是 fontSize。因此在IE 中要获得单个属性的值，就必须将属性名转为驼峰形式。 ( 感谢这篇文章。 )
关于 getComputedStyle 返回的值，具体查看这里。
不管你最初定义的样式是什么，涉及到宽度高度之类的，返回的都是最后实际使用的宽度和高度。
关于 elestyle 的返回值，是和定义的样式的值相等的，如果设置为auto，就直接返回auto。
然后是元素的高宽，对于一个没有设定高宽的元素而言，在 IE678 下使用 getPropertyValue("width|height") 得到的是 auto 。而标准浏览器会直接返回它的 px 值，当然我们希望在 IE 下也返回 px 值。
这里的 HACK 方法是使用 elementgetBoundingClientRect() 方法。
elementgetBoundingClientRect() -- 可以获得元素四个点相对于文档视图左上角的值 top、left、bottom、right ，通过计算就可以容易地获得准确的元素大小。
参考链接 chokcoco的博客园
用JS获取Html标签属性有两种方法：
如<a id="link" href=">
以上就是关于js中关于获取元素属性的方法（object.style.width）全部的内容，包括:js中关于获取元素属性的方法（object.style.width）、javascript无法获取属性"style"的值 对象为null或未定义、原生js获取元素的样式style属性值等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）