Как изменить стиль псевдокласса через JavaScript? - PullRequest
Новая
       5

Как изменить стиль псевдокласса через JavaScript?

12 голосов
/ 20 июня 2011

Этот пример, для простоты, просто иллюстрация того, что мне нужно сделать.Скажем, у меня есть элемент, стиль которого установлен в CSS.Стиль устанавливается как для элемента, так и для псевдокласса, скажем element: hover.Я могу переопределить стиль для элемента с помощью следующего JavaScript: element.style.setProperty ('имя-свойства', 'новое значение', '').Как изменить стиль псевдокласса с помощью JavaScript?

Спасибо. 

<html>
<head>
      <style type='text/css'>
             #myBtn {
                background-color: red;
             }
             #myBtn:hover {
                background-color: blue;
             }
      </style>
</head>
<body>
      <button id='myBtn'>Colored button</button>

      <button onclick="ChangeColor();">Script button</button>

      <script type="application/x-javascript">
              function ChangeColor() {
                 var Btn = document.getElementById('myBtn');
                 Btn.style.setProperty('background-color', 'green', '');
              };
      </script>
</body>
</html>

Ответы [ 4 ]

8 голосов
/ 20 июня 2011

Я бы использовал другой набор правил с дополнительным классом 

<html>
<head>
  <style type='text/css'>
    #myBtn {
      background-color: red;
    }
    #myBtn:hover {
      background-color: blue;
    }
    #myBtn.changed {
      background-color: green;
    }
    #myBtn.changed:hover {
      background-color: yellow; /* or whatever you want here */
    }
</head>

А потом 

<script type="application/x-javascript">
      function ChangeColor() {
         var btn = document.getElementById('myBtn');
         btn.className = "changed";
      };
</script>

Конечно, это имеет смысл только для одного или нескольких различных значений, которые вы хотите иметь для своего цвета.

6 голосов
/ 20 июня 2011

CSS псевдоклассы и псевдоэлементы не являются частью DOM, и поэтому вы не можете напрямую изменять их свойства стиля с помощью JavaScript.

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

3 голосов
/ 20 июня 2011

Вы не можете изменять их напрямую, но вы можете вставить CSS в головной части DOM.

2 голосов
/ 20 июня 2011

Вы можете работать с существующими таблицами стилей в IE6 + и большинстве других браузеров.

Редактирование Существующие правила возможны, но хитрый кросс-браузер.

Этот пример добавляет новое правило (селектор и объявление) к последней таблице стилей в документе. 

function addCss(sel, css){
    S= document.styleSheets[document.styleSheets.length-1];
    var r= (S.cssRules!= undefined)? S.cssRules: S.rules;
    if(S.insertRule) S.insertRule(sel+'{'+css+'}',r.length);
    else if(S.addRule)S.addRule(sel,css,r.length);
}

 addCss('button:hover','background-color:blue;');
...