CSS et Javascript : Obtenez une liste d'attributs personnalisés CSS

Question

De ce code :

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

}

Avec javascript -- par exemple à partir d'un $('.test') -- Comment puis-je obtenir une liste des attributs CSS dont le nom de propriété commence par le préfixe "-custom-" ? (ils peuvent avoir des noms différents, mais toujours le même préfixe).

Je voudrais l'avoir :

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

Je sais que je peux aussi utiliser le data- attribut HTML, mais pour des raisons très spécifiques, je dois utiliser un équivalent CSS. Merci pour votre aide.

Answer 1

Réponse courte : IE 9 vous donnera ces valeurs.

Cependant, Firefox/Chrome/Safari les analysent.

exemple jsfiddle

vous pouvez parcourir en boucle les feuilles de style du document pour trouver une correspondance avec le sélecteur souhaité (notez que cette procédure peut s'avérer coûteuse, en particulier sur les sites comportant de nombreux fichiers 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);
                    }
                }
            }
        }
    }
}

vous remarquerez que dans les navigateurs autres qu'IE 9 (je n'ai pas testé IE 8 ou inférieur), l'affichage de l'adresse de l'utilisateur est le suivant -custom- ont été supprimés de l'application cssText .

Answer 2

Voici une solution qui permet d'obtenir les attributs css personnalisés :

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

Ça m'a pris un peu de temps à mettre en place, et je ne savais pas qu'on pouvait faire ça avant.

Plutôt cool !

Answer 3

C'est un peu tard, mais je pense que cela vaut la peine de le poster, au cas où je pourrais aider d'autres personnes.

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

Et il vous imprimera un arbre soigné avec tous les sélecteurs et leurs propriétés :)