¿Hay alguna forma de acceder a una variable personalizada a través de la notación de puntos (o paréntesis) en lugar de utilizar los métodos getComputedStyle y getPropertyValue ? En ejemplo (sé que no es la mejor manera):
let darkColor = getComputedStyle(document.documentElement).getPropertyValue('--dark-color'); console.log(darkColor) :root { --dark-color: black; } ¿Hay alguna forma de no usar esos métodos y escribir algo como document.documentElement.style['--dark-color'] ? (este no funciona, pero solo para hacerse una idea). Tengo curiosidad porque puede acceder a atributos regulares como color o el color background-color través de la notación de puntos, pero no para las variables personalizadas.
Puede obtener las propiedades personalizadas aplicadas solo con getComputedStyle y getPropertyValue .
element.style[someProperty] y getComputedStyle(element)[someProperty] no son equivalentes.
element.style le brinda la propiedad asignada directamente al elemento (no lo que se aplica actualmente, que puede ser diferente).
Y tu :root { --dark-color: black; } se aplica a través de la hoja de estilo y no directamente en el elemento.
getComputedStyle devuelve una CSSStyleDeclaration donde los valores de las propiedades reflejan el resultado de todas las reglas aplicadas. Para obtener la propiedad personalizada correcta, necesita getComputedStyle , por lo que no puede deshacerse de eso.
Para getComputedStyle(element).getPropertyValue(name) en comparación con la getComputedStyle(element)[name] .
La notación de puntos o el acceso a la matriz no es posible para las propiedades personalizadas. Ese acceso lo da esta parte de la especificación:
Para cada propiedad de
propertyde CSS que sea una propiedad de CSS compatible , se aplica la siguiente interfaz parcial donde el atributo en mayúsculas y minúsculas se obtiene ejecutando el algoritmo de propiedad de CSS para el atributo IDL para laproperty.partial interface CSSStyleDeclaration { [CEReactions] attribute [LegacyNullToEmptyString] CSSOMString _camel_cased_attribute; };El
attributeen mayúsculas y minúsculas, al obtenerlo, debe devolver el resultado de invocargetPropertyValue()con el argumento como resultado de ejecutar el atributo IDL en el algoritmo de propiedad CSS para el atributo en mayúsculas y minúsculas.
Y la propiedad CSS admitida se especifica como:
[…] El término propiedad CSS compatible * se refiere a una propiedad CSS que implementa el agente de usuario, incluidas las propiedades prefijadas por el proveedor, pero excluyendo las propiedades personalizadas . […]