Javascript:如何将 getComputedStyles() 生成的 css 样式设置为按钮

Question

我想将使用 getComputedStyle() 生成的所有计算样式添加到另一个按钮中。我已经尝试使用 .cssText 但似乎还需要在这里做一些其他事情。有什么建议可以实现这一目标。

//获取样式并存入sessionstorage

const getStyle = getComputedStyle(document.getElementById("testButton"));
sessionStorage.setItem("getStylesItem", JSON.stringify(getStyle));

//将 session 对象的样式设置为按钮

const jsonValue = JSON.parse(sessionStorage["getStylesItem"]);
const elem = document.getElementById('TestButton1');
elem.style.cssText = jsonValue.cssText;

//虚拟json值

{
alignContent: "normal",
alignItems: "center",
alignSelf: "auto",
alignmentBaseline: "auto",
all: "",
animation: "none 0s ease 0s 1 normal none running",
animationDelay: "0s",
animationDirection: "normal",
animationDuration: "0s",
animationFillMode: "none"
}

Answer 1

循环 CSS 对象，然后形成一个字符串。您应该为 cssText 使用内联样式。

const jsonValue = JSON.parse(sessionStorage["getStylesItem"]);
const elem = document.getElementById('TestButton1');

let cssText = '';
for (const property in jsonValue) {
  if (!Number.isNaN(parseInt(property))) continue;
  cssText += `${property}:${jsonValue[property]}`;
}

elem.style.cssText = cssText;

CSSStyleDeclaration 对象具有像 0: "align-content", 1: "align-items" 这样的数字属性，所以你只需要过滤非数字属性。