1. 程式人生 > >獲取元素的style樣式(內聯,內部)

獲取元素的style樣式(內聯,內部)

我們在實際應用中,經常會獲取元素的樣式,
我們會這樣獲取:

獲取內嵌樣式

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

然後順利的得到了這樣的結果

這裡寫圖片描述