Actualmente estoy trabajando en un diseñador HTML ( https://github.com/node-projects/web-component-designer ). Para esto, es necesario leer todas las propiedades css establecidas de un objeto. Por el momento uso este código:
window.onload = function(){ let node = document.querySelector('b-c'); for (let s of node.style) { let val = node.style[s]; console.log(s, val) //if (val && typeof val === 'string') //designItem.styles.set(s, node.style[s]); } } <bc style="background: var(--kx-dark)"></bc>El problema es que con el ciclo for no obtengo todos los estilos. Por ejemplo, no obtienes el "fondo" en el ciclo
Para obtener --kx-dark puedes leer el atributo de la etiqueta
Además, la var es visible cuando se obtiene el background que es un estilo agrupado que no se muestra como .style[..]
Tenga en cuenta que el ciclo no resuelve el estilo computado, por lo que tampoco hay color de fondo del ciclo; aquí hay algunas soluciones
document.querySelectorAll("bc").forEach((elem, i) => console.log(i, elem.getAttribute("style"))) //getComputedStyle does not show --kx-dark document.querySelectorAll("bc").forEach((elem, i) => console.log(i, window.getComputedStyle(elem).backgroundColor)) // let's try this: window.onload = function() { const styleDict = {} let nodes = document.querySelectorAll('b-c'); nodes.forEach((node,i) => { for (let s of node.style) { styleDict[s] = node.style[s]; if (s.indexOf("-") != -1) { // get the bundle const mainStyle = s.split("-")[0] styleDict[mainStyle] = node.style[mainStyle]; } } console.log(i,styleDict) }) } :root { --kx-dark: rgb(165, 50, 50); } <bc style="background: var(--kx-dark)">Is this brown?</bc> <bc style="background-color: var(--kx-dark)">Is this brown?</bc>La razón por la que no ve el estilo de fondo es porque no existe un estilo de fondo. Para ser más claros, si bien hay un estilo de fondo, en realidad es una colección de otros estilos. Lo que ve en la herramienta de desarrollo de un navegador es en realidad una abreviatura de varios estilos de fondo que están encadenados en el background único que luego se analizan en sus atributos específicos.
Mira tu código
let node = document.querySelector('b-c'); for (let s of node.style) { let val = node.style[s]; console.log(s, val) } <bc style="background: var(--kx-dark);color:red;"></bc> Puede ver el estilo de color , así como todas las propiedades extraídas del valor de fondo.
Ahora mira este código
let node = document.querySelector('b-c'); for (let s of node.style) { let val = node.style[s]; console.log(s, val) } <bc style="background-color: var(--kx-dark);color:red;"></bc>Obtiene solo dos valores, porque solo hay un valor de fondo específico.
let elem = document.querySelector("#title"); function getAllStyleProperties(elem){ let allStyle = {}; if(elem){ let styleText = elem.style.cssText; let allStyleText = styleText.split(";"); allStyleText.forEach((style) => { if(style){ let [properties, value] = style.split(":"); allStyle[properties.trim()] = value.trim(); } }) } return allStyle; } console.log(getAllStyleProperties(elem)) <h1 style="background: var(--kx-dark); margin: 10px" id="title">Hello World</h1>Puedes probar esto...