CSS和Javascript：獲取CSS自定義屬性的列表

HTML

<div class="test"></div>

CSS

.test { 
    background-color:red; 
    font-size:20px; 
    -custom-data1: value 1; 
    -custom-data2: 150; 
    -custom-css-information: "lorem ipsum"; 

}

用JavaScript - 例如從$('.test') - 如何我可以得到一個CSS屬性的列表，它的屬性名稱以前綴「-custom-」開頭嗎？（他們可以有不同的名稱，但始終不變的前綴）

我想獲得這樣的：

{ 
    customData1: "value 1", 
    customData2: 150, 
    customCssInformation: "lorem ipsum" 
}

我知道我還可以使用data- HTML屬性，但對於一些非常具體的原因我需要使用CSS等價物。謝謝你的幫助。

來源

2011-08-31 Etienne

你可能想看看這個問題：http://stackoverflow.com/questions/2926326/can-i-access-the-value-of-invalid-custom-css-properties-from-javascript – mwan

你應該考慮使用'data- *'屬性。 –

@Andrew：是的，我知道，但出於一個非常具體的原因，我需要在我的CSS中使用相當於數據HTML屬性。 – Etienne

簡答：IE 9會給你這些值。

但是，Firefox/Chrome/Safari將它們解析出來。

example jsfiddle

可以遍歷文檔的樣式表找到匹配所需選擇（注意，這可能是特別對大型/多個CSS文件的網站昂貴的過程）

var css = document.styleSheets, 
    rules; 

// loop through each stylesheet 
for (var i in css) { 
    if (typeof css[i] === "object" && css[i].rules || css[i].cssRules) { 
     rules = css[i].rules || css[i].cssRules; 
     // loop through each rule 
     for (var j in rules) { 
      if (typeof rules[j] === "object") { 
       if (rules[j].selectorText) { 
        // see if the rule's selectorText matches 
        if (rules[j].selectorText.indexOf('.test') > -1) { 
         // do something with the results. 
         console.log(rules[j].cssText); 
         $('.test').html(rules[j].cssText); 
        } 
       } 
      } 
     } 
    } 
}

您會注意到IE 9以外的瀏覽器（未測試過IE 8或更低版本）已從cssText中刪除-custom-樣式。

來源

2011-08-31 03:48:08 MikeM

這裏有一個解決方案，可以讓自定義CSS屬性：

<style> 
.custom-thing 
{ 
    -custom-1: one; 
    -custom-2: 4; 
} 
</style> 
<a class='custom-thing' href='#' onclick='test();'>test</a> 
<script> 
    function test() { 
     var valueOne = getCssValue('.custom-thing', '-custom-1'); 
     alert(valueOne); 

     var valueTwo = getCssValue('.custom-thing', '-custom-2'); 
     alert(valueTwo); 
    } 

    function getCssValue(selector, attribute) { 
     var raw = getRawCss(selector); 
     if (!raw) { 
      return null; 
     } 
     var parts = raw.split(';'); 
     for (var i in parts) { 
      var subparts = parts[i].split(':'); 
      if (trimString(subparts[0]) == attribute) { 
       return subparts[1]; 
      } 
     } 
     return null; 
    } 

    function trimString(s) { 
     return s.replace(/^\s+|\s+$/g, ""); 
    } 

    function getRawCss(selector) { 
     for (var i = 0; i < document.styleSheets.length; i++) { 
      var css = document.styleSheets[i].rules || document.styleSheets[i].cssRules; 
      for (var x = 0; x < css.length; x++) { 
       if (css[x].selectorText == selector) { 
        return (css[x].cssText) ? css[x].cssText : css[x].style.cssText; 
       } 
      } 
     } 
     return null; 
    } 
</script>

這花了我一點點地放在一起，我從來不知道你之前可以做到這一點。

很酷！

來源

2011-08-31 02:55:38

感謝您的回答，我對它進行了測試，但它看起來只能在IE（IE9）上運行，並且只具有-custom-2屬性。與其他瀏覽器它總是返回我空。 – Etienne

當樣式表從外部加載時，這似乎不適用於Chrome;只有使用的屬性是可查詢的 – Casey

比較晚，但我相信這是值得大驚小怪的發佈它，以防我可以幫助其他人。

var css = document.styleSheets[0]; // some stylesheet 

var result = []; 
for (var r=0; r<css.rules.length; r++) 
{ 
    var item = { selector: css.rules[r].selectorText }; 
    var styles = {}; 
    for (var s in css.rules[r].style) 
    { 
     if (!isNaN(s)) 
     { 
      var key = css.rules[r].style[s]; 
      var val = css.rules[r].style[key]; 
      styles[key] = val; 
     } 
    } 
    item.styles = styles; 
    result.push(item); 
} 

console.log(result);

它會打印出一個整齊的樹與所有的選擇器及其屬性。 :)

來源

2015-07-07 16:59:04

CSS和Javascript：獲取CSS自定義屬性的列表

回答

相關問題