Dado
<div></div> <style> body { --var1: 3; --var2: var(--var1); } div { --var3: var(--var2); width: var(--var3); } </style>¿Cómo puedo obtener la lista de referencia de variables css?
getReferenceList(divElement, 'width')resultaría en
['--var3', '--var2', '--var1', 3]Si ya conoce el nombre de la propiedad, puede usar getComputedStyle . Por ejemplo,
window.getComputedStyle(document.querySelector('body')).getPropertyValue('--var1'); Esto devolverá 3 .
Si desea obtener una lista de todas las hojas de estilo, puede usar CSSStyleSheet.cssRules .
El siguiente ejemplo le dará la hoja de estilo de body :
document.styleSheets[0].cssRules[0].cssText Entonces el resultado será "body { --var1: 3; --var2: var(--var1); }" .
En su caso, cssRules[0] = body y cssRules[1] = div .
También puede usar selectorText para averiguar qué etiqueta es. En este caso document.styleSheets[0].cssRules[0].selectorText devolverá el body de la cadena.
Si prefiere una matriz de propiedades y valores, en lugar de una cadena, puede usar esta expresión regular:
const regex = /(?<={)[ -a-zA-Z0-9\S][^}]+/gm const str = document.styleSheets[0].cssRules[0].cssText.match(regex); console.log(str[0].split(';'));