js获取元素属性值为空的原因和解决办法

问题描述:js获取某元素的属性值为空

代码:

<!-- css定义在head中 -->
<style>
#box{
width: 100px;
height: 100px;
background:#333;
}
</style>
<!-- html+js -->
<body>
<input type="button" value="变色" id="btn">
<div id="box">
</div>
<script>
var oBox=document.querySelector("#box");
alert(oBox.style.width);//啥也没有alert出来
</script>
<body>

问题原因:

style只能获取定义在行间样式的值,这里由于样式是定义在head中,而不是行间,

因此啥也没有alert出来

解决方法:

a).在行间设置元素相关的属性;

b).自定义获取样式的函数getStyle(obj,name),并进行调用即可

function getStyle(obj,name){
if(obj.currentStyle){
//适用IE
return obj.currentStyle[name];
}else{
//适用Chrome,FF
return getComputedStyle(obj,false)[name];
}
}

c).特殊:获取某浮动子元素相对与父元素的left和top值,可以直接用offsetWidth和offsetHeight来获取(注意这两个值都是不带单位的)

上一篇:移动端点击延迟解决方案


下一篇:ASP.NET中图片验证码与js获取验证码的值