DOM疑惑點整理（二）內聯、嵌入、外聯樣式訪問

時間 2019-12-07

標籤 dom 疑惑整理內聯嵌入樣式訪問欄目 HTML 简体版

原文原文鏈接

訪問的style屬性爲空？

有時候，直接經過某元素的style屬性去查看相關信息時，會發現查看到的是空的屬性。
緣由很簡單，style屬性只能訪問內聯樣式，而你把css寫在了外部文件。
不是很清楚內聯樣式，能夠看下面的解釋：
內聯樣式：直接加在某個元素屬性中的樣式。css

<p style="color:white;font-size：10px;">外聯樣式</p>

嵌入樣式：樣式的屬性內容寫在該網頁代碼中。瀏覽器

<head>
    <style>
        p{
            color:white;
            font-size：10px;
        }
    </style>
</head>
<body>
    <p>內聯樣式</p>
</body>

外聯樣式：樣式屬性，寫在外部文件，經過連接導入。code

<head>
    <link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
    <p>內聯樣式</p>
</body>

注意點：css樣式的應用，採起就近原則，所以通常狀況優先級是：內聯樣式>嵌入樣式>外聯樣式。（但若是外聯樣式的link語句在嵌入樣式以後，那麼外聯樣式因爲離元素更近，優先級就高於嵌入樣式了）get

css樣式訪問注意點

①雖然經過style屬性，只能訪問內聯元素樣式，但咱們一般仍是利用style屬性來改變css樣式。
②不建議利用style屬性去查看一個元素的樣式，由於你極可能沒法獲得正確樣式。Dom2中有新的方式去查看完整的屬性（某元素內聯、外聯、嵌入樣式合起來計算後的屬性）。
方法以下：it

function showComputedStyles(){
        const myDiv = document.getElementById("myDiv");  //假設有個myDiv
        if(myDiv.currentStyle){      //IE不支持getComputedStyle方法
            let computedStyle = myDiv.currentStyle;
            console.log(computedStyle.backgroundColor);   
        }else{                       //非IE瀏覽器能夠用getComputedStyle方法
            let computedStyle = document.defaultView.getComputedStyle(myDiv,null); 
            console.log(computedStyle.backgroundColor); 
        }
    }

注意點：經過這樣的方式獲得的屬性，都是經計算後的，同時也是隻讀的。但十分建議用這種方式去查看元素的屬性。關於修改屬性，仍是得用style屬性或者setAttribute。io