获取标签中的margin-top的值,使用document.getElementsByTagName("div").style.marginTop(有遍历)但只能得到内嵌样式的值,内联部分的值不能得到,具体代码如下:
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<style>
.mt1{margin-top:10px;}
.mt3{margin-top:20px;}
.mt4{margin-top:23px;}
.mb1{margin-bottom: 60px;}
.mb2{margin-bottom: 15px;}
.mb4{margin-bottom: 5px;}
</style>
</head>
<body>
<div class="mt1 mb1">
<div id="flag" style="margin-top:15px">
<div class="mt3">
<div class="mt4">
ppppp
<!-- ... -->
</div>
</div>
</div>
<!-- ... -->
<p>content content content</p>
<p>content content content</p>
<!-- ... -->
<div class="mb2">
<div style="margin-bottom:35px">
<div class="mb4">44444
<!-- ... -->
</div>
</div>
</div>
</div>
<button onclick="js()"> dd</button>
<script>
function js()
{
var eles = document.getElementsByTagName("div");
for(var i=0;i<eles.length;i++){
alert(parseInt(eles[i].style.marginTop));
}
}
用IE F12调试下看看,是不是css没有加载
为啥不用jquery呢?
看起来代码有点乱。。。建议重发一下比较完整的代码。
<!DOCTYPE HTML>
<html>
<head>
<title>test</title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
<style>
.mt1{margin-top:10px;}
.mt3{margin-top:20px;}
.mt4{margin-top:23px;}
.mb1{margin-bottom: 60px;}
.mb2{margin-bottom: 15px;}
.mb4{margin-bottom: 5px;}
</style>
</head>
<body>
<div class="mt1 mb1">
<div id="flag" style="margin-top:15px">
<div class="mt3">
<div class="mt4">
ppppp
</div>
</div>
</div>
<!-- ... -->
<p>content content content</p>
<p>content content content</p>
<!-- ... -->
<div class="mb2">
<div style="margin-bottom:35px">
<div class="mb4">44444
<!-- ... -->
</div>
</div>
</div>
</div>
<button onclick="js()"> dd</button>
</body>
<script type="text/javascript">
function js()
{
var eles = $("div");
$.each(eles,function(k,v){
alert(k+"-----"+$(v).css("margin-top"));
})
}
</script>
</html>
帮你用jq改写了一下。供参考。
现在已经清楚了,只有内嵌的样式才能获取到,内联和外联都不能获取对象。