CSS i JavaScript: Pobierz listę atrybutów CSS zwyczaju

Question

Od tego kodu:

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

} 

z javascript - na przykład z $('.test') - jak czy mogę uzyskać listę atrybutów CSS, których nazwa właściwości zaczyna się od prefiksu "-custom-"? (mogą mieć różne nazwy, ale zawsze ten sam prefiks)

chciałbym uzyskać to:

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

wiem, że mogę również użyć atrybutu HTML z data-, ale dla niektórych bardzo specyfiki powodów Muszę użyć odpowiednika CSS. Dzięki za pomoc.

Answer 1

Krótka odpowiedź: IE 9 poda te wartości.

Jednak Firefox/Chrome/Safari je analizuje.

example jsfiddle

można pętli stylów dokumentu, aby znaleźć dopasowanie do żądanego selektora (zauważ, że to może być kosztowna procedura szczególnie na terenach o dużych/wielu plików 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); 
        } 
       } 
      } 
     } 
    } 
} 

zauważysz w przeglądarkach innych niż IE 9 (nie testowałem IE 8 lub niższych), że style -custom- zostały usunięte z cssText.

Answer 2

Oto rozwiązanie, które może uzyskać atrybutów niestandardowych 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> 

Zajęło mi trochę umieścić razem, a ja nie wiedziałem, można to zrobić wcześniej.

Całkiem fajnie!

Answer 3

Raczej za późno, ale uważam, że warto o tym pisać, na wypadek, gdy mogę pomóc innym.

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

Zostanie wydrukowane czyste drzewo z wszystkimi selektorami i ich właściwościami. :)