您的位置：首页 > Web前端 > CSS

获取元素的style样式（内联，内部）

2015-09-26 11:24 811 查看

我们在实际应用中，经常会获取元素的样式，

我们会这样获取：

获取内嵌样式

<!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>

然后顺利的得到了这样的结果

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript 获取style样式

相关文章推荐

新的分享

章节导航