我们在实际应用中,经常会获取元素的样式,
我们会这样获取:
获取内嵌样式
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>获取非行间元素样式</title>
<style type="text/css"></style>
</head>
<body>
<div id='test' style="width:100px; height:100px; background-color:red;" >style</div>
<script type="text/javascript">
var test = document.getElementById('test');
var a = test.style.width;
alert(a);
</script>
</body>
</html>
执行结果
我们看结果,好的,没问题,获取出来了,但是实际应用中,我们是这样用的吗?不是,我们是这样用的
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>获取非行间元素样式</title>
<style type="text/css">
#test{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id='test'>style</div>
<script type="text/javascript">
var test = document.getElementById('test');
var a = test.style.width;
alert(a);
</script>
</body>
</html>
看起来没问题是吧,好的,我们测一下结果
结果很惊讶,这是为什么?
获取非行间样式(内部样式)
其实解决方式是这样的,
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>获取非行间元素样式</title>
<style type="text/css">
#test{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id='test'>style</div>
<script type="text/javascript">
/*
*获取元素的非行间样式
*
* oDiv -> dom元素对象
* attr -> style属性
*
*返回值 -> style属性的值
**/
function getStyle(oDiv, attr){
if(oDiv.currentStyle){
//针对IE浏览器
return oDiv.currentStyle[attr];
}else{
//Firefox浏览器
return getComputedStyle(oDiv, false)[attr];
}
}
var test = document.getElementById('test');
var a = getStyle(test, 'width');
alert(a);
</script>
</body>
</html>
然后顺利的得到了这样的结果