Вы не можете стилизовать псевдокласс только для определенного элемента, точно так же, как вы не можете создать псевдокласс во встроенном атрибуте style = "..." (поскольку здесь нет селектора).
Вы можете сделать это, изменив таблицу стилей, например, добавив правило:
#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';
Старые и второстепенные браузеры, скорее всего, не поддерживают ни один из синтаксисов. Динамическая перестановка таблиц стилей выполняется редко, потому что это довольно неприятно, редко требуется и исторически проблематично.
function sameOrigin(url) { var loc = window.location, a = document.createElement('a'); a.href = url; return a.hostname === loc.hostname && a.port === loc.port && a.protocol === loc.protocol; }
Я собрал для этого небольшую библиотеку, так как думаю, что есть допустимые варианты использования для управления таблицами стилей в JS. Причины:
источник
Функция, справляющаяся с кроссбраузерностью:
источник
Просто поместите CSS в строку шаблона.
Затем создайте элемент стиля, поместите строку в тег стиля и прикрепите ее к документу.
Об остальном позаботится специфика. Затем вы можете динамически удалять и добавлять теги стиля. Это простая альтернатива библиотекам и возням с массивом таблиц стилей в DOM. Удачного кодирования!
источник
insertAdjacentElement
требует 2 аргумента в основных браузерах (Chrome, Firefox, Edge), первый из которых устанавливает позицию относительно ссылочного элемента ( см. здесь ). Это недавнее изменение? (К ответу добавлено слово beforeend).Моя уловка заключается в использовании селектора атрибутов. Атрибуты легче настроить с помощью javascript.
CSS
Javascript
HTML
источник
Есть еще одна альтернатива. Вместо того, чтобы напрямую манипулировать псевдоклассами, создайте реальные классы, моделирующие одни и те же вещи, такие как класс «зависания» или «посещаемый» класс. Стилизуйте классы обычным "." синтаксис, а затем вы можете использовать JavaScript для добавления или удаления классов из элемента при возникновении соответствующего события.
источник
:before
&:after
- это псевдоэлементы, а не классы.Вместо того, чтобы напрямую устанавливать правила псевдокласса с помощью javascript, вы можете установить правила по-разному в разных файлах CSS, а затем использовать Javascript для отключения одной таблицы стилей и включения другой. Метод описан в A List Apart (см. Подробнее).
Настройте файлы CSS как,
А затем переключаться между ними с помощью javascript:
источник
Как уже говорилось, это не поддерживается браузерами.
Если вы не придумываете стили динамически (т. Е. Извлекаете их из базы данных или что-то в этом роде), вы сможете обойти это, добавив класс в тело страницы.
CSS будет выглядеть примерно так:
И javascript для изменения этого будет примерно так:
источник
element.classList.add
не поддерживается? Я продолжаю видеть, как люди поступаютelement.className +=
.Переключение таблиц стилей - способ сделать это. Вот библиотека для динамического создания таблиц стилей, поэтому вы можете устанавливать стили на лету:
http://www.4pmp.com/2009/11/dynamic-css-pseudo-class-styles-with-jquery/
источник
В jquery вы можете легко установить псевдоклассы при наведении курсора.
источник
вот решение, включающее две функции: addCSSclass добавляет в документ новый класс css, а toggleClass включает его
В примере показано добавление настраиваемой полосы прокрутки в div.
источник
Если вы используете РЕАКТ, там есть что-то под названием радий . Здесь так полезно:
источник