獲取應用於特定元素的所有CSS樣式的列表

Question

有沒有辦法獲取應用於特定html元素的僅用戶定義的計算css樣式列表。 樣式可以通過外部css文件或嵌入/內聯樣式以任何方式應用。

 .p1{font-size:14px; line-height:20px;} 

 <style> .p1{ line-height:18px; color:green;} </style> <p class="p1" style="color:red;">Some Paragraph</p> 

現在我需要的列表是應用於元素的唯一用戶定義的計算樣式，而不是包含由window.getComputedStyle（）提供的空白/ null / default-values的整組計算樣式

為了更准確地說明我的問題，我想提出一個我第一次訪問網站的場景，我想使用開發人員工具欄以編程方式獲取唯一的用戶定義樣式（或者通過在控制台上編寫一些腳本） 。 因此，考慮到這種情況，我要求的最終產出應該是 -

{
  'color':'red',
  'line-height' : '18px',
  'font-size' : '14px'  
}

如果需要，請糾正我的疑問或解釋中的任何錯誤。

Answer 1

您正在尋找的方法是：

window.getComputedStyle()

請參閱： Window.getComputedStyle（）上的Mozilla開發人員網絡（MDN）;

http://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

Window.getComputedStyle()方法在應用活動樣式表並解析這些值可能包含的任何基本計算后，給出元素的所有CSS屬性的值。

---

根據您問題中的標記和樣式：

var para1 = document.getElementsByClassName('p1')[0];
var para1Styles = window.getComputedStyle(para1);

para1Color = para1Styles.getPropertyValue('color'); // red
para1FontSize = para1Styles.getPropertyValue('font-size'); // 14px
para1LineHeight = para1Styles.getPropertyValue('line-height'); // 20px

同樣的方法還允許您通過聲明第二個（可選）參數從偽元素中提取樣式屬性值。

例如。

var para1AfterStyles = window.getComputedStyle(para1, ':after');

Answer 2

我一直在尋找這個問題的答案。 我想出了一個解決方案，但它有點像hackish。 它確實解決了這個問題。

function getAppliedComputedStyles(element, pseudo) {
    var styles = window.getComputedStyle(element, pseudo)
    var inlineStyles = element.getAttribute('style')

    var retval = {}
    for (var i = 0; i < styles.length; i++) {
        var key = styles[i]
        var value = styles.getPropertyValue(key)

        element.style.setProperty(key, 'unset')

        var unsetValue = styles.getPropertyValue(key)

        if (inlineStyles)
            element.setAttribute('style', inlineStyles)
        else
            element.removeAttribute('style')

        if (unsetValue !== value)
            retval[key] = value
    }

    return retval
}

如果有幫助，請告訴我。

它使用css unset屬性值，僅在現代瀏覽器中支持。 https://developer.mozilla.org/en/docs/Web/CSS/unset#Browser_compatibility