Я ищу способ изменить правила CSS для селекторов псевдокласса (таких как: ссылка: парение, и т.д.) от JavaScript.
Так аналог кода CSS: a:hover { color: red }
в JS.
Я не мог найти ответ больше нигде; если кто-либо знает, что это - что-то, что браузеры не поддерживают, который был бы полезным результатом также.
Вы не можете разработать псевдокласс на одном только конкретном элементе, таким же образом что у Вас не может быть псевдокласса во встроенном стиле =, "..." приписывают (поскольку нет никакого селектора).
можно сделать это путем изменения таблицы стилей, например, путем добавления правила:
#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);
}
}
};