Устанавливание правил псевдокласса CSS от JavaScript

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

можно сделать это путем изменения таблицы стилей, например, путем добавления правила:

#elid:hover { background: red; }

принятие каждого элемента, на который Вы хотите влиять, имеет уникальный идентификатор, чтобы позволить ему быть выбранным.

В теории документ, который Вы хотите, http://www.w3.org/TR/DOM-Level-2-Style/Overview.html , что означает, что Вы можете (учитывая существование ранее встроенная или связанная таблица стилей) использование синтаксиса как:

document.styleSheets[0].insertRule('#elid:hover { background-color: red; }', 0);
document.styleSheets[0].cssRules[0].style.backgroundColor= 'red';

IE, конечно, требует своего собственного синтаксиса:

document.styleSheets[0].addRule('#elid:hover', 'background-color: red', 0);
document.styleSheets[0].rules[0].style.backgroundColor= 'red';

Более старые и незначительные браузеры вероятны не поддерживать любой синтаксис. Динамическая игра таблицы стилей редко делается, потому что это довольно раздражающее для разбираний, редко необходимый, и исторически неприятный.

Как уже указано это не что-то та поддержка браузеров.

, Если Вы не придумываете стили динамично (т.е. вытаскиваете их из базы данных или чего-то) необходимо быть в состоянии работать вокруг этого путем добавления класса к телу страницы.

css посмотрел бы что-то как:

a:hover { background: red; }
.theme1 a:hover { background: blue; }

И JavaScript для изменения это было бы чем-то как:

// Look up some good add/remove className code if you want to do this
// This is really simplified

document.body.className += " theme1";  

Функция, которая справляется с кроссбраузерностью:

addCssRule = function(/* string */ selector, /* string */ rule) {
  if (document.styleSheets) {
    if (!document.styleSheets.length) {
      var head = document.getElementsByTagName('head')[0];
      head.appendChild(bc.createEl('style'));
    }

    var i = document.styleSheets.length-1;
    var ss = document.styleSheets[i];

    var l=0;
    if (ss.cssRules) {
      l = ss.cssRules.length;
    } else if (ss.rules) {
      // IE
      l = ss.rules.length;
    }

    if (ss.insertRule) {
      ss.insertRule(selector + ' {' + rule + '}', l);
    } else if (ss.addRule) {
      // IE
      ss.addRule(selector, rule, l);
    }
  }
};

Вместо того, чтобы напрямую устанавливать правила псевдокласса с помощью javascript, вы можете установить правила по-разному в разных файлах CSS, а затем использовать Javascript для отключения одной таблицы стилей и включения другой. Метод описан в A List Apart (см. Подробнее).

Настройте файлы CSS как,

<link rel="stylesheet" href="always_on.css">
<link rel="stylesheet" title="usual" href="preferred.css"> <!-- on by default -->
<link rel="alternate stylesheet" title="strange" href="alternate.css"> <!-- off by default -->

А затем переключайтесь между ними с помощью javascript:

function setActiveStyleSheet(title) {
   var i, a, main;
   for(i=0; (a = document.getElementsByTagName("link")<i>); i++) {
     if(a.getAttribute("rel").indexOf("style") != -1
        && a.getAttribute("title")) {
       a.disabled = true;
       if(a.getAttribute("title") == title) a.disabled = false;
     }
   }
}

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

http://www.4pmp.com/2009/11/dynamic-css-pseudo-class-styles-with-jquery/