установить стиль с помощью: hover javascript

Я понимаю, что следующий метод отлично подходит для установки стилей CSS из-за совместимости браузера.

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

что я не могу использовать cssText применить стили на :hover и :focus события CSS.
Что мне делать вместо этого?

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

P. S. Не говоря уже об использовании события JavaScript, такие как onmouseover вместо CSS :hover (это не соответствует моей ситуации.)

7
css dom javascript stylesheet

2 ответов

вы можете сделать это с помощью магии Вуду:

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

не совсем то, что вам нужно, но вы можете настроить его и сделать из него причудливую функцию, если хотите.

8

вы всегда можете добавить отдельное правило стиля в существующую таблицу стилей вместо создания нового элемента стиля. Что-то вроде:

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 или элемента.

если вы не смогли добавить правило класса или стиля заранее, вы также можете сделать это динамически примерно так же (определите класс, определите класс:наведите курсор, затем примените класс к нужным элементам).

1