Настройка правил псевдокласса CSS из JavaScript

Question

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

Итак, аналоговый код CSS: a:hover { color: red } в JS.

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

Answer 1

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

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

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

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

Answer 2

Как уже говорилось, это не то, что поддерживают браузеры.

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

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

Answer 3

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

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

Answer 4

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

Настройка файлов 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; 
    } 
    } 
} 

Answer 5

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

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

Answer 6

я бросил вместе small library for this, так как я считаю, что есть действительные случаи использования для манипулирования таблиц стилей в JS. Причины:

• Настройка стилей, которые должны быть рассчитаны или извлечены, например, установив предпочтительный размер шрифта пользователя из файла cookie.
• Настройка поведенческих (неэстетичных) стилей, особенно для разработчиков виджета/плагинов пользовательского интерфейса. Вкладки, карусели и т. Д. Часто требуют, чтобы какой-то базовый CSS просто функционировал - не должен требовать таблицу стилей для основной функции.
• Лучше, чем встроенные стили, поскольку правила CSS применяются ко всем текущим и будущим элементам и не загромождают HTML при просмотре в Firebug/Developer Tools.

Answer 7

Существует еще одна альтернатива. Вместо того, чтобы манипулировать псевдоклассами напрямую, создавайте реальные классы, которые моделируют одни и те же вещи, такие как класс «hover» или «посещенный» класс. Стиль классов с обычным "." а затем вы можете использовать JavaScript для добавления или удаления классов из элемента при срабатывании соответствующего события.

Answer 8

Мой трюк использует селектор атрибутов. Атрибуты легче настроить с помощью javascript.

CSS

.class{ /*normal css... */} 
.class[special]:after{ content: 'what you want'} 

Javascript

function setSpecial(id){ document.getElementById(id).setAttribute('special', '1'); } 

HTML

<element id='x' onclick="setSpecial(this.id)"> ... 

Answer 9

В JQuery вы можете легко установить парения псевдоклассы.

$("p").hover(function(){ 
$(this).css("background-color", "yellow"); 
}, function(){ 
$(this).css("background-color", "pink"); 
}); 

Answer 10

Если вы используете ВЗАИМОДЕЙСТВУЕТЕ, Существует нечто, называемое radium. Это так полезно здесь:

• Add handlers to props if interactive styles are specified, e.g. onMouseEnter for :hover, wrapping existing handlers if necessary

• If any of the handlers are triggered, e.g. by hovering, Radium calls setState to update a Radium-specific field on the components state object

• On re-render, resolve any interactive styles that apply, e.g. :hover, by looking up the element's key or ref in the Radium-specific state

Answer 11

здесь есть решение, включая две функции: addCSSclass добавляет новый класс CSS к документу, и toggleClass превращает его в

пример показывает добавление пользовательских прокрутки в DIV

// If newState is provided add/remove theClass accordingly, otherwise toggle theClass 
 
function toggleClass(elem, theClass, newState) { 
 
    var matchRegExp = new RegExp('(?:^|\\s)' + theClass + '(?!\\S)', 'g'); 
 
    var add = (arguments.length > 2 ? newState : (elem.className.match(matchRegExp) === null)); 
 

 
    elem.className = elem.className.replace(matchRegExp, ''); // clear all 
 
    if (add) elem.className += ' ' + theClass; 
 
} 
 

 
function addCSSclass(rules) { 
 
    var style = document.createElement("style"); 
 
    style.appendChild(document.createTextNode("")); // WebKit hack :(
 
    document.head.appendChild(style); 
 
    var sheet = style.sheet; 
 

 
    rules.forEach((rule, index) => { 
 
    try { 
 
     if ("insertRule" in sheet) { 
 
     sheet.insertRule(rule.selector + "{" + rule.rule + "}", index); 
 
     } else if ("addRule" in sheet) { 
 
     sheet.addRule(rule.selector, rule.rule, index); 
 
     } 
 
    } catch (e) { 
 
     // firefox can break here   
 
    } 
 
    
 
    }) 
 
} 
 

 
let div = document.getElementById('mydiv'); 
 
addCSSclass([{ 
 
    selector: '.narrowScrollbar::-webkit-scrollbar', 
 
    rule: 'width: 5px' 
 
    }, 
 
    { 
 
    selector: '.narrowScrollbar::-webkit-scrollbar-thumb', 
 
    rule: 'background-color:#808080;border-radius:100px' 
 
    } 
 
]); 
 
toggleClass(div, 'narrowScrollbar', true);

<div id="mydiv" style="height:300px;width:300px;border:solid;overflow-y:scroll"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a eros metus. Nunc dui felis, accumsan nec aliquam quis, fringilla quis tellus. Nulla cursus mauris nibh, at faucibus justo tincidunt eget. Sed sodales eget erat consectetur consectetur. Vivamus 
 
    a diam volutpat, ullamcorper justo eu, dignissim ante. Aenean turpis tortor, fringilla quis efficitur eleifend, iaculis id quam. Quisque non turpis in lacus finibus auctor. Morbi ullamcorper felis ut nulla venenatis fringilla. Praesent imperdiet velit 
 
    nec sodales sodales. Etiam eget dui sollicitudin, tempus tortor non, porta nibh. Quisque eu efficitur velit. Nulla facilisi. Sed varius a erat ac volutpat. Sed accumsan maximus feugiat. Mauris id malesuada dui. Lorem ipsum dolor sit amet, consectetur 
 
    adipiscing elit. Sed a eros metus. Nunc dui felis, accumsan nec aliquam quis, fringilla quis tellus. Nulla cursus mauris nibh, at faucibus justo tincidunt eget. Sed sodales eget erat consectetur consectetur. Vivamus a diam volutpat, ullamcorper justo 
 
    eu, dignissim ante. Aenean turpis tortor, fringilla quis efficitur eleifend, iaculis id quam. Quisque non turpis in lacus finibus auctor. Morbi ullamcorper felis ut nulla venenatis fringilla. Praesent imperdiet velit nec sodales sodales. Etiam eget 
 
    dui sollicitudin, tempus tortor non, porta nibh. Quisque eu efficitur velit. Nulla facilisi. Sed varius a erat ac volutpat. Sed accumsan maximus feugiat. Mauris id malesuada dui. 
 
</div>