¿Puede JavaScript recuperar valores de propiedades CSS inválidos?

Propiedades CSS personalizadas, denotadas por nombres prefijados con un tablero, ofrece un mecanismo para definir y acceder a estilos únicos dentro de una aplicación. Sin embargo, ¿puede JavaScript acceder a los valores de estas propiedades personalizadas si el navegador no reconoce o no es reconocido por el navegador?

explicación

el objeto CSSStyledEclaration expone las propiedades de estilo de un elemento en JavaScript. Cuando se encuentra con un nombre de propiedad inválido, como "-my-foo", este objeto generalmente omite la propiedad y procede con otras propiedades válidas.

La especificación de estilo DOM-2 sugiere que todas las propiedades de CSS dentro de un bloque de declaraciones deben ser accesibles a través de la interfaz CSSStyledElledClaration, incluidas las invalidadas. Sin embargo, en la práctica, los navegadores como Chrome y Firefox no admiten este comportamiento.

a pesar de la falta de acceso directo a JavaScript a los valores de las propiedades CSS inválidas, un enfoque alternativo implica analizar el texto CSS sin procesar. Al extraer las propiedades de estilo del elemento de estilo correspondiente, puede identificar y recuperar manualmente el valor de una propiedad personalizada, incluso si no es válida.

Code Ejemplo

El siguiente código demuestra cómo el texto de CSS en bruto y recuperar el valor de la propiedad "-my-foo" document.getElementsByTagName ("estilo") [0] .inntext; const proppertyname = "-my-foo"; const valor = styletext.match (new Regexp (`\\ b $ {Propertyname}: \\ s*(.?) \\ b`," i ")) [1];

const styleText = document.getElementsByTagName("style")[0].innerText;
const propertyName = "-my-foo";

const value = styleText.match(new RegExp(`\\b${propertyName}:\\s*(. ?)\\b`, "i"))[1];

requiere una expresión regular para que coincida con el nombre de la propiedad personalizada y extraer su valor. Se considera una solución de bajo nivel y puede no ser el método más eficiente o apropiado para todos los escenarios.