使用:hover伪类设置样式的JavaScript方法

Question

我了解以下方法适用于设置 CSS 样式，因为它具有浏览器兼容性。

element.style.cssText = "color:red;";

我不能使用cssText来应用样式到:hover和:focus CSS事件。
我该如何做才能实现这个效果？

element.style.cssText = ":focus{color:red;}";

附言：不要提到使用JavaScript事件，例如onmouseover代替CSS的:hover（这不适合我的情况）。

- Web_Designer

---

onmouseover与hover是相同的；您可以附加该事件并简单地添加一个类，然后通过CSS样式化该类。具有更高的可重用性。 - Zirak

为什么不在普通的CSS中定义它，然后只在JavaScript中更改类呢？ - Dmitry

@Zirak，差不多。在IE6中，:hover仅适用于<a>标签，但onmouseover适用于几乎所有元素。它们相似，但并不完全相同。 - Blender

@Zirak和@Dmitry这两个选项在这种情况下不可用。你知道有什么方法吗？ - Web_Designer

Answer 1

你可以通过一些巫术魔法来实现：

var head = document.getElementsByTagName('head')[0];
var style = document.createElement('style');
var declarations = document.createTextNode('selector:pseudo { property: value }');

style.type = 'text/css';

if (style.styleSheet) {
  style.styleSheet.cssText = declarations.nodeValue;
} else {
  style.appendChild(declarations);
}

head.appendChild(style);

虽然不完全符合您的需求，但如果您愿意，可以对其进行微调并制作出一个漂亮的函数。

- Blender

---

什么是“Voodoo magic”？请解释一下。我确实不喜欢这个词的内涵。 - Web_Designer

Answer 2

您可以向现有的样式表中添加个别的样式规则，而不是创建一个新的样式元素。以下是一个示例：

您可以在现有的样式表中添加个别的样式规则，而不是创建新的样式元素。例如：

function addStyle() {
    var style = document.styleSheets[0];        //select style sheet (0==first)
    var styleSel = ".class:hover";              //define selector
    var styleDec = "color: red;";             //define declaration

    if(style.insertRule) {        //for modern, DOM-compliant browsers

        style.insertRule(styleSel+'{'+styleDec+'}', style.cssRules.length);
        //I chose to do it this way to more easily support the addRule method, but
        //know that insertRule only needs two parameters, full style rule
        //(selector+prop/value declarations), and index to insert rule at
        //                  styleSheets[0].insertRule(rule, index);

    }else {                       //for IE < 9
        style.addRule(styleSel, styleDec, -1);
    }
}

我改编了MDN上的例子

这假设您正在使用一个类（已经定义和应用）来添加:hover伪选择器，但它也可以很容易地是ID或元素选择器。

如果您无法事先添加类或样式规则，则也可以以类似的方式动态执行此操作（定义类，定义class:hover，然后将类应用于所需元素）。

- Chase