通过Javascript获取元素的所有设置css属性

Question

我目前正在研究HTML设计器(https://github.com/node-projects/web-component-designer)。为此，需要读取对象的所有设置的css属性。 目前我使用此代码：

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>

问题是，使用 for 循环我没有得到所有样式。例如，你没有在循环中获得"背景">

Answer 1

要获取--kx-dark，您可以读取标签的属性

此外，在获取background时，var 是未显示为 .style[..] 的分组样式，也是可见

的。请注意，循环不会解析 computedStyle，因此循环中也没有背景色 - 这里有一些解决方法

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>

Answer 2

您看不到背景样式的原因是没有背景样式这样的东西。更清楚的是，虽然有背景样式，但它实际上是其他样式的集合。 您在浏览器的开发人员工具中看到的内容实际上是几种背景样式的简写，这些样式链接在单个background中，稍后解析为其特定属性。

查看您的代码

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>

您可以看到color样式以及从背景值中提取的所有属性。

现在看看这段代码

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>

您只能获得两个值，因为只有一个特定的背景值。

Answer 3

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>

你可以试试这个...

Answer 4

你也许可以用window.getComputedStyle()来完成它

getComputedStyle()返回包括浏览器默认CSS属性的所有CSS属性

阅读有关Window.getComputedStyle()的更多信息

与您的案例相关的window.getComputedStyle()的示例用法

window.onload = function() {
let node = document.querySelector('b-c');
const cssStyles = getComputedStyle(node);
for (const cssProperty in cssStyles) {
const cssValue = cssStyles.getPropertyValue(cssProperty);
// This is not just limited to inline styles but also to all other css properties
if (cssProperty === "background") {
console.log({
[cssProperty]: cssValue
});
}
}
}

<style>
:root {
--kx-dark: red;
}
</style>
<b-c style="background: var(--kx-dark)">B-C</b-c>

Answer 5

您可以使用getComputedStyle函数获取应用于元素的所有样式。

function dumpCSSText(element){
var s = '';
var o = getComputedStyle(element);
for(var i = 0; i < o.length; i++){
s+=o[i] + ':' + o.getPropertyValue(o[i])+';';
}
return s;
}