使用DOM元素定义悬停属性

Question

我正在使用一个Chrome扩展程序，该扩展程序显示动态加载的弹出窗口。 用户可以更改设置以选择其颜色。 我的问题是我想更改一些popup元素的：hover属性，但我找不到如何做。

我当前的代码：

var myDiv = document.createElement('a');
myDiv.style.background = myIcon;
myDiv.style.backgroundImage = myURL;

我要添加的内容（不工作代码atm）：

myDiv.hover.style.backgroundColor = myColor;

感谢您的帮助。

Answer 1

您无法使用JavaScript为伪类设置样式。 相反，您必须使用CSS定义它们。 但是，您可以使用JavaScript将CSS动态添加到页面：

var style = document.createElement("style");
style.appendChild(
    document.createTextNode("some-selector:hover { /*...*/ }")
);
document.querySelector("head").appendChild(style);

...或类似。

这是一个向文档添加类为foo的元素的示例，以及为其动态定义的样式：

 var foo = document.createElement("div"); foo.className = "foo"; foo.innerHTML = "This is foo, hover me"; document.body.appendChild(foo); var style = document.createElement("style"); // Pick a color at random var color = ["red", "blue", "green"][Math.floor(Math.random() * 3)]; style.appendChild( document.createTextNode( ".foo:hover { background-color: " + color + " }") ); document.querySelector("head").appendChild(style);