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

Я ищу способ изменить правила CSS для селекторов псевдокласса (таких как: ссылка: парение, и т.д.) от JavaScript.

Так аналог кода CSS: a:hover { color: red } в JS.

Я не мог найти ответ больше нигде; если кто-либо знает, что это - что-то, что браузеры не поддерживают, который был бы полезным результатом также.

118
задан Karun Kamal 3 October 2019 в 13:47
поделиться

3 ответа

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

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

#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';

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

184
ответ дан 24 November 2019 в 01:57
поделиться

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

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

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";  
2
ответ дан 24 November 2019 в 01:57
поделиться

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

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);
    }
  }
};
16
ответ дан 24 November 2019 в 01:57
поделиться
Другие вопросы по тегам:

Похожие вопросы: