Obtener las propiedades de css personalizadas del elemento (-mystyle) usando JavaScript

Question

En una aplicación donde ciertos elementos tienen propiedades de CSS personalizadas, ¿hay alguna forma de recuperar dicho valor a través de JavaScript?

p. Ej.

<div id="myDiv" style="color:#f00;-my-custom-property:upsidedown;" /> 

puedo tener acceso al atributo de color a través de estos dos métodos:

$('myDiv').style.getPropertyValue("color") 
$('myDiv').style.color 

Pero estos no funcionan para las propiedades personalizadas. ¿Esto es compatible?

Answer 1

Los valores CSS no utilizados por el navegador se descartan y no se pueden obtener a través del .style. Las otras dos opciones están disponibles, sin embargo:

1. atributo personalizado

Usar un atributo personalizado, según la definición de HTML5. Entonces, simplemente recupera el valor de ese atributo. Esta es la ruta recomendada.

HTML <div id="myDiv" style="color:#f00;" data-custom-property="upsidedown" />

2. Analizar style Atributo

Recuperar el valor del atributo style (no .style) y analizarlo en pares nombre/valor. Luego use el valor que se establece con el nombre -my-custom-property. Mientras esto funciona, es un poco complicado, y desaconsejo su uso.

Answer 2

Las propiedades de CSS no reconocidas se ignorarán cuando se incluyan en el atributo style, o en la propiedad style.cssText.

Si desea definir una propiedad a un elemento específico, recomiendo data-attributes:
HTML:

<div id="myDiv" style="color:#f00;" data-custom-property="upsidedown" /> 

JavaScript:

//jQuery's method to retrieve value: 
$("#myDiv").data("custom-property"); 
//jQuery, without parsing: 
$("#myDiv").attr("data-custom-property"); 

// Modern browsers, native JS: 
document.getElementById("myDiv").dataset["custom-property"]; 
// Older browsers, native JS: 
document.getElementById("myDiv").getAttribute("data-custom-property"); 

Answer 3

No puede utilizar Data- * atributos (html5)? Eso al menos sería válido y no un hack extraño.

Answer 4

function getCustomCssProperty(elementID, propertyName){ 
    var style = document.getElementById(elementID).getAttribute("style"); 
    var entries = style.split(";"); 

for (var i=0; i<entries.length; i++){ 
    var entry = entries[i].split(":"); 
    if(entry[0] == propertyName){ 
    return entry[1]; 
    } 
} 

return null; 

} 

Answer 5

Esto es en realidad ahora es posible para todos los navegadores que utilizan un truco CSS especializada a través de la etiqueta content CSS. En este artículo se explica cómo hacerlo:

http://www.yearofmoo.com/2015/04/cross-browser-custom-css-properties.html

Answer 6

CSS:

:root { 
    --custom-property: #000000; 
} 

Javascript:

var custom_property = window.getComputedStyle(document.body).getPropertyValue('--custom-property').trim()