I'm currently workin on a HTML Designer (https://github.com/node-projects/web-component-designer). For this in need to read all set css properties of an object. At the moment I use this code:
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]);
}
}<b-c style="background: var(--kx-dark)"></b-c>The problem is, with the for loop I do not get all styles. For example, you don't get the "background" in the loop
To get --kx-dark you can read the attribute of the tag
Also the var is visible when getting the background which is a grouped style not showing as .style[..]
Note the loop does not resolve the computedStyle so no background-color either from the loop - here are a few workarounds
document.querySelectorAll("b-c").forEach((elem, i) => console.log(i, elem.getAttribute("style")))
//getComputedStyle does not show --kx-dark
document.querySelectorAll("b-c").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);
}<b-c style="background: var(--kx-dark)">Is this brown?</b-c>
<b-c style="background-color: var(--kx-dark)">Is this brown?</b-c>The reason you don't see the background style is because there is no such thing as a background style. To be more clear, while there is a background style, it's actually a collection of other styles.
What you see in a browser's developers tool is actually a shorthand of several background styles that are chained in the single background that are later parsed into their specific attributes.
Look at your code
let node = document.querySelector('b-c');
for (let s of node.style) {
let val = node.style[s];
console.log(s, val)
}<b-c style="background: var(--kx-dark);color:red;"></b-c>You can see the color style as well as all the properties extracted from the background value.
Now look at this code
let node = document.querySelector('b-c');
for (let s of node.style) {
let val = node.style[s];
console.log(s, val)
}<b-c style="background-color: var(--kx-dark);color:red;"></b-c>You get only two values, because there is only one specific background value.
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>You can try this...