CSS＆Javascriptを：CSSカスタムのリストを取得しますが、このコードから

Question

属性：

HTML

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

CSS

JavaScriptで

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

} 

- 例えば$('.test')から - どのように接頭辞 "-custom-"で始まるプロパティ名を持つCSS属性のリストを取得できますか？

が、私はこれを取得したいと思います（彼らはさまざまな名前を持っていますが、常に同じプレフィックスができます）：

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

私はまたdata- HTML属性を使用することができることを知っているが、いくつかの非常に具体的な理由のために私は相当するCSSを使う必要があります。ご協力いただきありがとうございます。ここで

Answer 1

短い回答：IE 9はこれらの値を提供します。

ただし、Firefox/Chrome/Safariでそれらを解析します。

希望のセレクタに一致するものを見つけるために、ドキュメントのスタイルシートをループ（これは特に大/複数の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); 
        } 
       } 
      } 
     } 
    } 
} 

でき

example jsfiddle

あなたは-custom-スタイルがcssTextから削除されているIE 9以外のブラウザ（IE 8以下はテストしていません）に気付くでしょう。

Answer 2

は、カスタム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> 

これは一緒に入れて私を少し取って、私はあなたが前にこれを行うことができます知っていたことはありません。

プリティクール！

Answer 3

私は他人を助けることができる場合もありますが、それほど遅くはありませんが、それを掲示するのは大変だと思います。

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); 

そして、すべてのセレクタとそのプロパティを持つ素敵なツリーが表示されます。 :)