javascript - 连接和断开属性

Question

我试图让此处描述的谷歌转换按钮完全以编程方式创建，但在连接和断开连接的颜色方面也可以在代码中自定义。

cast integration docs

从上面的文档中您可以看到，您可以设置以下属性来控制两种状态的颜色。

--connected-color && --disconnected-color

由于按钮是以编程方式创建的，我必须使用 setAttribute 或类似的东西来创建转换按钮上的属性。然而，开头的 -- 字符导致 invalidCharacterError 我想知道是否有人遇到过这个？

JSFiddle example

Answer 1

从你的jsfiddle中，我用api创建了另一个 fiddle ，很明显 --connected-color && --disconnected-color 是css变量。 https://jsfiddle.net/karthick6891/up7ugfqd/10/

所以您所需要的只是 chrome 转换按钮的全局样式。

.chromecast-buttonxxxxx {
  --connected-color: blue;
  --disconnected-color: gray;
}

注意:不能使用特殊字符设置属性名称。您必须通过 css 控制行为。