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来获取(注意这两个值都是不带单位的)
