Question

据我所知，由于浏览器兼容性，以下方法非常适合设置CSS样式。

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

我不能做的是使用cssText在:hover和:focus CSS事件上应用样式。
我该怎么做而不是这个？

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

P.S。不要提及使用onmouseover等javascript事件而不是CSS :hover（它不符合我的情况。）

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

不完全符合您的要求，但如果您愿意，可以调整它并制作出奇特的功能。

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);
    }
}

我改编了example at MDN
这假设您正在使用一个类（已经定义并应用）来添加：hover伪选择器，但它可以很容易地成为ID或元素选择器。

如果您无法要事先添加类或样式规则，您也可以以相同的方式动态地执行此操作（定义类，定义类：悬停，然后将类应用于所需元素）。

设置样式：悬停javascript

2 个答案: