установить стиль с помощью: hover javascript - PullRequest
Новая
       23

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

8 голосов
/ 15 мая 2011

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

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

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

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

PS Не упоминайте об использовании событий JavaScript, таких как onmouseover вместо CSS :hover (это не подходит для моей ситуации.)

Ответы [ 2 ]

9 голосов
/ 15 мая 2011

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

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

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

1 голос
/ 02 декабря 2011

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

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, но он также может быть просто селектором идентификатора или элемента. заранее с классом или стилевым правилом, вы также можете сделать это динамически почти таким же образом (определить класс, определить class: hover, затем применить класс к нужным элементам).

...