一个获取div中样式的问题

获取标签中的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改写了一下。供参考。

现在已经清楚了,只有内嵌的样式才能获取到,内联和外联都不能获取对象。