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

Lucky_Boy 發布于2019-08-22 16:19 / 1015人閱讀

摘要：內聯樣式外聯樣式樣式屬性，寫在外部文件，通過鏈接導入。內聯樣式注意點樣式的應用，采取就近原則，因此一般情況優先級是內聯樣式嵌入樣式外聯樣式。中有新的方式去查看完整的屬性某元素內聯外聯嵌入樣式合起來計算后的屬性。

訪問的style屬性為空？

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

外聯樣式

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

內聯樣式

外聯樣式：樣式屬性，寫在外部文件，通過鏈接導入。

內聯樣式

注意點：css樣式的應用，采取就近原則，因此一般情況優先級是：內聯樣式>嵌入樣式>外聯樣式。（但如果外聯樣式的link語句在嵌入樣式之后，那么外聯樣式由于離元素更近，優先級就高于嵌入樣式了）

css樣式訪問注意點

①雖然通過style屬性，只能訪問內聯元素樣式，但我們通常還是利用style屬性來改變css樣式。
②不建議利用style屬性去查看一個元素的樣式，因為你很可能無法得到正確樣式。Dom2中有新的方式去查看完整的屬性（某元素內聯、外聯、嵌入樣式合起來計算后的屬性）。
方法如下：

    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。

GPU云服務器云服務器 js和css內聯外聯 vue綁定內聯樣式 html的內聯樣式 js dom樣式修改

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/94248.html

根據瀏覽器渲染界面原理理解渲染阻塞、瀏覽器的重繪（repaints）與回流（reflows）

摘要：渲染阻塞在瀏覽器進行加載時，其實是并行加載所有資源。則就叫稱為重繪。在回流的時候，瀏覽器會使渲染樹中受到影響的部分失效，并重新構造這部分渲染樹，完成回流后，瀏覽器會重新繪制受影響的部分到屏幕中，該過程成為重繪。前面有講到當用戶在瀏覽器輸入url之后，經過一系列的過程，會最終向服務器請求到文檔數據，文檔數據請求到之后，瀏覽器會將這些數據傳給瀏覽器渲染引擎，渲染引擎開始正式工作了。構建...

phodal 2019-08-23 13:39 評論0 收藏0
根據瀏覽器渲染界面原理理解渲染阻塞、瀏覽器的重繪（repaints）與回流（reflows）

摘要：渲染阻塞在瀏覽器進行加載時，其實是并行加載所有資源。則就叫稱為重繪。在回流的時候，瀏覽器會使渲染樹中受到影響的部分失效，并重新構造這部分渲染樹，完成回流后，瀏覽器會重新繪制受影響的部分到屏幕中，該過程成為重繪。前面有講到當用戶在瀏覽器輸入url之后，經過一系列的過程，會最終向服務器請求到文檔數據，文檔數據請求到之后，瀏覽器會將這些數據傳給瀏覽器渲染引擎，渲染引擎開始正式工作了。構建...

daryl 2019-08-02 12:05 評論0 收藏0
根據瀏覽器渲染界面原理理解渲染阻塞、瀏覽器的重繪（repaints）與回流（reflows）

摘要：渲染阻塞在瀏覽器進行加載時，其實是并行加載所有資源。則就叫稱為重繪。在回流的時候，瀏覽器會使渲染樹中受到影響的部分失效，并重新構造這部分渲染樹，完成回流后，瀏覽器會重新繪制受影響的部分到屏幕中，該過程成為重繪。前面有講到當用戶在瀏覽器輸入url之后，經過一系列的過程，會最終向服務器請求到文檔數據，文檔數據請求到之后，瀏覽器會將這些數據傳給瀏覽器渲染引擎，渲染引擎開始正式工作了。構建...

ranwu 2019-08-29 17:22 評論0 收藏0
DOM的樣式操作

摘要：方法返回的是內聯樣式的聲明內容元素屬性名稱屬性中對象提供了屬性返回對象中對應中所有樣式屬性提供的對象封裝了所有樣式屬性得到樣式屬性對應的值，字符串類型將其轉換為類型用屬性獲取獲取頁面的屬性值為的元素直接使用屬性獲取內聯樣式獲取內嵌與外聯樣式 getAttribute()方法返回的是內聯樣式的聲明內容 //元素.getAttribute(屬性名稱); var btn=element.g...

Noodles 2019-08-23 11:41 評論0 收藏0