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 property 只读 - 你不能为一个元素分配一个全新的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元素也是如此）。

获取计算或默认的按钮样式并在新元素上设置

2 个答案: