2011-08-31 45 views
7

De este código:CSS y Javascript: Obtener una lista de atributos CSS personalizada

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

} 

con javascript - por ejemplo de un $('.test') - cómo ¿Puedo obtener una lista de los atributos CSS que tienen el nombre de la propiedad comenzando con el prefijo "-custom-"? (que pueden tener diferentes nombre, pero siempre el mismo prefijo)

me gustaría conseguir esto:

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

sé que también puedo usar el atributo HTML data-, pero para algunos muy específicos razones Necesito usar un CSS equivalente. Gracias por tu ayuda.

+2

Es posible que desee verificar esta pregunta: http://stackoverflow.com/questions/2926326/can-i-access-the-value-of-invalid-custom-css-properties-from-javascript – mwan

+1

Debería considerar usar los atributos 'data- *' para esto. –

+0

@Andrew: sí, lo sé, pero por una razón muy específica, necesito usar en mi CSS un equivalente del atributo HTML de datos. – Etienne

Respuesta

3

Respuesta corta: IE 9 le dará estos valores.

Sin embargo, Firefox/Chrome/Safari los analiza.

example jsfiddle

puede recorrer hojas de estilo del documento para encontrar una coincidencia con el selector deseada (tenga en cuenta que esto puede ser un procedimiento costoso, especialmente en sitios con múltiples archivos de gran tamaño/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); 
        } 
       } 
      } 
     } 
    } 
} 

Notará en buscadores que no sean IE 9 (no han probado IE 8 o inferior) que los estilos -custom- se han eliminado del cssText.

1

Aquí es una solución que puede obtener los atributos de CSS personalizado:

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

Esto me tomó un poco de armar, y nunca sabía que se podía hacer esto antes.

Pretty Cool!

+0

Gracias por su respuesta, lo probé pero parece que solo se ejecuta en IE (IE9) y solo con el atributo -custom-2. Con otros navegadores siempre me devuelve nulo. – Etienne

+0

Esto no parece funcionar en Chrome cuando la hoja de estilos se carga externamente; solo las propiedades que se usan son cuestionables – Casey

0

Bastante tarde, pero creo que vale la pena el alboroto publicarlo, en caso de que pueda ayudar a otros también.

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

Y le imprimirá un árbol ordenado con todos los selectores y sus propiedades. :)