获取按钮的计算或默认样式，并设置一个新元素

Question

我正在一个项目中定义自定义html元素并为其指定样式。 我正在尝试创建具有默认样式的按钮，并采用按钮的计算样式并将其设置为另一个自定义元素，并具有按钮激活和悬停效果。

但是它对我不起作用..有没有伙伴有解决方案或想法？

这是我的代码：

var A_btnfake = document.createElement('button'); 
cS = document.defaultView.getComputedStyle(A_btnfake, null);
A_btn = document.createElement('custbtn');
A_btn.style=cS;
some_elm.appendChild(A_btn);
//i don't want to define each style one by one,like :  A_btn.style.background = cS.backGround

有没有办法一次定义所有样式。

Answer 1

 A_btn.style=cS; 

style属性是只读的 -您不能将全新的CSSStyleDeclaration对象分配给元素，只能获取其（可能是元素绑定的）对象。

如果要将样式复制到另一个样式，则必须逐个属性地进行：

for (var prop in cS)
    A_btn.style[prop] = cS[prop];

Answer 2

您需要通过CSS来做到这一点，特别是如果您想继承:active和:hover状态。 这真的很容易，只需将新元素添加到选择器列表f.ex中：

button,
custbtn { color: yellow; }

请注意，在IE的某些旧版本中，您需要虚拟地添加新的自定义元素，以便能够通过CSS定位它们（​​HTML5元素也是如此）。