使用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);