Как изменить стиль псевдоэлемента через js

Недавно задалась вопросом: как динамически изменить стиль CSS в :before или :after у элемента с помощью JavaScript?

Поменять или задать content для before или after на JavaScript

Самое простое решение в одну строку:

<style>
#raz:after {
  content: attr(data-after);
  background: yellow;
}
</style>

<button onclick="this.dataset.after = ' мой after'" id="raz">нажать</button>

То есть для элемента создаём новый атрибут data-after, в котором пишем содержимое для content у after

Можно задать другой стиль CSS с дополнительным class, где content имеет значение none. Щелчок по кнопке будет присваивать этот class элементу.

<style>
  #element {background: #fff5d7; border: 5px solid #fff5d7;}
  #element:before {content: ":before"; border-bottom: solid brown;} 
  #element.new:before {content: none;} 
</style>

<button onclick="delBefore();">удалить</button>
<div id="element"></div>

<script>
function delBefore() {
    var div = document.getElementById('element');
    div.className = 'new'; 
}
</script>

Скрипт, чтобы изменить псевдоэлементы у NodeList

А как быть, если вместо getElementById используется getElementsByName или querySelectorAll и т.п? Там работать нужно с массивом NodeList. Например, я хочу чтобы высота у :after каждого элемента составила четверть ширины элемента. Один класс на всех тут не подходит, поскольку ширина у элементов разная.

<style>
  #element {background: #fff5d7; border: 5px solid #fff5d7;}
  #element li {background: green;}
  #element li:nth-child(2) {background: blue; width: 30%; text-align: right;}
  #element li:after {content: ":after"; background: DarkSalmon; display: inline-block;}
</style>

<button onclick="borderWidth();">height = 1/4 ширины li</button>
<ol id="element">
<li>
<li>
</ol>

<script>
function borderWidth() {
 
  [].forEach.call(document.querySelectorAll('#element li'), function(eLi) {
 
 
    eLi.dataset.width = eLi.offsetWidth/4;
    
    var style = document.createElement('style');
    style.innerHTML = '#element li[data-width="' + eLi.dataset.width + '"]:after {height: ' + eLi.dataset.width + 'px;}';
    document.querySelector('head').appendChild(style);
  });
}
</script>

1. Причина:

Эта статья возникла в сообществе OSC, кто-то спросил, как использовать jq для получения псевдоэлементов. Моя первая мысль заключается в том, что мощный CSS-запрос должен иметь возможность получать псевдоэлементы.

Однако на самом деле CSS Query не может. То есть мы не можем получить псевдоэлемент: before через $ («: before»), $ (dom) .find («: before») или document.querySelector («: before»).

По этой причине мне нужно заново понять псевдоэлементы (псевдоэлементы). Почему вы не можете использовать JS для прямого получения псевдоэлементов?

Например, псевдоэлементы :: before и :: after используются для вставки содержимого в начало или конец элемента при визуализации CSS.Они не ограничены документом и не влияют на сам документ, а только на окончательный стиль. Этот добавленный контент не будет отображаться в DOM, а только добавлен в слой рендеринга CSS.

По факту,Псевдоэлементы могут отображаться браузером, но сами они не являются элементами DOM. Его нет в документе, поэтому JS не может напрямую управлять им.А селекторы jQuery основаны на элементах DOM, поэтому псевдоэлементы нельзя манипулировать напрямую.

Как управлять стилем псевдоэлемента?

По этой причине я решил резюмировать методы управления псевдоэлементами JS, чтобы облегчить их использование в будущем.

2. Что такое псевдоэлементы:

Для начала кратко поговорим о том, что такое псевдоэлементы. Всего шесть псевдоэлементов, а именно::after、::before、::first-line、::first-letter、::selection、::backdrop。

Наиболее часто используемые псевдоэлементы на основных веб-страницах — это :: after и :: before.

Чтобы узнать о семантике этих псевдоэлементов, обратитесь к другой моей статье «Сводка селектора псевдоэлементов CSS》。

В CSS3 рекомендуется, чтобы псевдоэлементы использовали синтаксис с двумя двоеточиями (: вместо одного двоеточия (:), чтобы различать псевдоклассы и псевдоэлементы. Большинство браузеров поддерживают эти два синтаксиса представления. Only :: selection всегда может начинаться с двух двоеточий (: :). Поскольку IE8 поддерживает только синтаксис с одним двоеточием, если вы хотите быть совместимым с IE8, безопасным способом является использование одного двоеточия.

3. Получите значение атрибута псевдоэлемента:

Получить значение атрибута псевдоэлемента можноwindow.getComputedStyle()Метод получения объекта объявления стиля CSS псевдоэлемента. Затем используйте метод getPropertyValue или напрямую используйте доступ «ключ-значение» для получения соответствующего значения свойства.

Синтаксис: window.getComputedStyle (element [, pseudoElement])

• Параметры следующие:
• element (Object): элемент DOM, в котором расположен псевдоэлемент;
• pseudoElement (String): тип псевдоэлемента. Необязательные значения: «: after», «: before», «: first-line», «: first-letter», «: selection», «: backdrop»;

Дайте каштан:

// код CSS
#myId:before {
    content: "hello world!";
    display: block;
    width: 100px;
    height: 100px;
    background: red;
}

 // HTML-код
<div id="myId"></div>

 // JS код
var myIdElement = document.getElementById("myId");
var beforeStyle = window.getComputedStyle(myIdElement, ":before");
console.log(beforeStyle); // [CSSStyleDeclaration Object]
console.log(beforeStyle.width); // 100px
console.log(beforeStyle.getPropertyValue("width")); // 100px
console.log(beforeStyle.content); // "hello world!"

Примечания:

1.

И getPropertyValue (), и прямой доступ к объекту «ключ-значение» могут обращаться к объекту CSSStyleDeclaration. Различия между ними:

• Для атрибута float, если вы используете доступ «ключ-значение», вы не можете напрямую использовать getComputedStyle (element, null) .float, но должны быть cssFloat и styleFloat;
• Используйте доступ напрямую по ключу, ключ атрибута должен использовать верблюжий регистр, например: style.backgroundColor;
• Использование метода getPropertyValue () не обязательно должно выполняться в регистре верблюда (запись в регистре верблюда не поддерживается), например: style.getPropertyValue («border-top-color»);
• Метод getPropertyValue () поддерживается в IE9 + и других современных браузерах; в IE6 ~ 8 вместо него можно использовать метод getAttribute ();

2.

Псевдоэлемент по умолчанию — «display: inline». Если атрибут отображения не определен, даже если значение атрибута ширины явно установлено в CSS на фиксированный размер, например «100 пикселей», значение ширины, полученное в конце, все равно будет «автоматическим». Это связано с тем, что ширину и высоту встроенных элементов нельзя настроить. Решение состоит в том, чтобы изменить атрибут display псевдоэлемента на «block», «inline-block» или другое.

4. Измените стиль псевдоэлемента:

Метод 1. Измените класс, чтобы изменить значение атрибута псевдоэлемента:

Дайте каштан:

// код CSS
.red::before { 
    content: "red"; 
    color: red; 
}
.green::before { 
    content: "green"; 
    color: green;
}

 // HTML-код
 <div class = "red"> контент контент контент контент </div>

 // код jQuery
$(".red").removeClass('red').addClass('green');

Метод 2. Используйте insertRule CSSStyleSheet для изменения стиля псевдоэлементов:

Дайте каштан:

document.styleSheets [0] .addRule ('. red :: before', 'color: green'); // Поддержка IE document.styleSheets [0] .insertRule ('. red :: before {color: green}', 0); // Поддержка современных браузеров, отличных от IE

Способ 3. В<head>Вставить в этикетку<style>Внутренний стиль:

var style = document.createElement("style"); 
document.head.appendChild(style); 
sheet = style.sheet; 
 sheet.addRule ('. red :: before', 'color: green'); // совместим с браузером IE
 sheet.insertRule ('. red :: before {color: green}', 0); // Поддержка современных браузеров, отличных от IE

Или используйте jQuery:

$('<style>.red::before{color:green}</style>').appendTo('head');

5. Измените значение атрибута содержимого псевдоэлемента:

Метод 1. Используйте insertRule CSSStyleSheet для изменения стиля псевдоэлемента:

var latestContent = "Измененный контент";
var formerContent = window.getComputedStyle($('.red'), '::before').getPropertyValue('content'); document.styleSheets[0].addRule('.red::before','content: "' + latestContent + '"'); document.styleSheets[0].insertRule('.red::before { content: "' + latestContent + '" }', 0);

Метод 2. Используйте атрибут data- * элемента DOM, чтобы изменить значение содержимого:

// код CSS
.red::before {
    content: attr(data-attr);
    color: red;
}

 // HTML-код
 <div class = "red" data-attr = "red"> контент контент контент контент </div>

 // Код JacaScript
$('.red').attr('data-attr', 'green');

6. Небольшое предложение:

1.

Атрибут содержимого псевдоэлемента очень мощный, и он может записывать различные строки и некоторые мультимедийные файлы. Но содержимое псевдоэлементов существует только в дереве рендеринга CSS, а не в реальной DOM. Поэтому для SEO-оптимизации лучше не включать контент, связанный с документами, в псевдоэлементы.

2.

Для изменения стиля псевдоэлементов рекомендуется использовать метод изменения стиля путем замены класса. Потому что два других способа вставить CSSStyleSheet в строку — это вставить коды символов в JavaScript, что не способствует разделению стиля и управления; а сращивание строк подвержено ошибкам.

3.

Измените значение атрибута содержимого псевдоэлемента, для его изменения рекомендуется использовать атрибут data- * модели DOM.
http://www.dengzhr.com/frontend/css/797

Как изменить CSS-стили? Ответ очевиден — отредактировать CSS-файл. Возможно, после этого понадобится компиляция. Затем нужно обновить стили во время выполнения, изменив атрибуты элемента, такие как class и aria-*.

Хотя этот ответ неполный, подумайте над следующими вопросами:

• Как обновить стили во время выполнения, основываясь на взаимодействии с пользователем, а не на предустановленных значениях? Сгенерировать уникальные имена классов для каждой возможной комбинации цветов нереально.
• Что, если у вас нет доступа к таблицам стилей или HTML? Например, если сайт сгенерирован конструктором сайтов со сторонними CSS-файлами, изобилующими свойствами !important.

В этой статье мы рассмотрим четыре способа обновить CSS-стили при помощи JavaScript. Также мы кратко разберем, в каких случаях эти способы стоит применять. Наконец, мы оценим их с точки зрения CSS-сложности, т. е. того, насколько просто понять и изменить код в каждом случае.

Используйте встроенные стили

До изобретения CSS для стилизации веб-страниц использовались теперь уже устаревшие HTML-атрибуты, такие как color, background и border. Встроенный CSS — духовный преемник этих атрибутов. При таком подходе свойства CSS задаются через атрибут style элемента.

Два следующих способа изменить размер шрифта для элемента hero равнозначны:

document.getElementById('hero').style = 'font-size: 12rem;';
document.getElementById('hero').style.fontSize = '12rem';

Использование JavaScript для обновления встроенного CSS в целом считается плохой практикой. Причин для этого несколько:

1. Нарушается разделение между стилями и контентом, из-за чего становится сложнее читать и изменять документ.
2. При таком подходе CSS-селекторы не могут формировать семантические абстракции.
3. Без селекторов обновление нескольких элементов на странице потребует прохода по всем элементам, а это отнимает время. К тому же, таким образом можно допустить ошибки.
4. Повторяющиеся стили раздувают ваш HTML.
5. У вас не будет доступа к псевдоэлементам и псевдоклассам, они доступны только через CSS-селекторы.

В настоящее время мы наблюдаем возрождение встроенного CSS-lite через атомарные CSS-фреймворки, такие как Tailwind CSS. Атомарные фреймворки используют имена классов CSS, которые переводятся в одно CSS-свойство и основываются на генерации компонентов для повторного использования стилей при помощи JS. Это позволяет избавиться от проблем 3, 4 и 5 из приведенного выше списка. Но проблему раздувания HTML это все равно не решает.

Хотя встроенные CSS-стили в целом вредны, их применение имеет одно преимущество. Чтобы внести изменение, вам не нужно иметь доступ к таблицам стилей. Поэтому с их помощью вполне можно вносить некоторые правки по ходу работы.

Когда стоит применять встроенный CSS

• Для обновления стилей отдельного элемента во время выполнения.
• Для быстрой проверки чего-либо.
• Когда таблицы стилей недоступны.

Используйте HTML-атрибуты

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

// toggles HTML semantic state
document.getElementById('cta').disabled = true;
// a aria based semantic button state 
document.getElementById('cta').ariaExpanded = "true"; 
// a class based semantic primary variation
document.getElementById('cta').classList.toggle('primary'); 

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

Но я хочу отметить, что примеры в приведенном выше коде расположены в порядке их значимости. Прежде чем прибегнуть к состояниям на основе классов, стоит обратиться к состояниям на основе атрибутов HTML. Теперь, когда селектор :has() уже на горизонте, это стало проще.

Когда стоит модифицировать атрибуты помимо style

Всегда, когда у вас есть доступ к таблицам стилей и предопределенные стили.

Используйте CSSOM

Следующий метод изменения CSS посредством JavaScript можно сравнить со скальпелем в наборе инструментов фронтендера. Мы можем напрямую изменять объекты CSS.

Два предыдущих метода для изменения стилей модифицируют HTML DOM. Но в некоторых случаях проще изменить напрямую CSS Object Model (CSSOM).

Обратившись к объекту styleSheets документа, мы можем избирательно менять стили сайта, используя всю мощь CSS. Например:

const thirdPartyStylesheet = document.styleSheets[0];
//index 15 rule color: red !important;
thirdPartyStylesheet.deleteRule(15);

Можно даже добавить новые динамически генерируемые стили при помощи конструктора CSSStyleSheet. По своему опыту могу сказать, что это наилучший вариант, когда вы имеете дело со сторонними таблицами стилей или конструктором сайтов, т. е., когда ваши возможности работы с CSS ограничены.

Когда вы засоряете свои встроенные стили многочисленными !important для перезаписи сторонних стилей, происходит жуткое разрастание CSS-селекторов. Изменение CSSOM позволяет этого избежать. Этот подход также может быть эффективнее перебора в цикле нескольких элементов для динамического обновления их стилей.

Основной недостаток CSSOM-подхода — такой код труден для понимания и отладки. Для измененного CSSOM нет поддержки в инструментах разработчика. И, если только вы не задокументировали свои шаги крупным шрифтом, ваш код может довести будущего мейнтейнера до ручки. Так же, как и скальпель, этот метод нужно использовать редко и осторожно.

Когда стоит модифицировать CSSOM

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

Используйте пользовательские свойства CSS

Последний способ динамического обновления CSS-стилей предполагает применение пользовательских свойств CSS. Хотя технически тут не используются никакие новые APIs, применение пользовательских свойств существенно отличается от предыдущих подходов.

Пользовательские свойства можно использовать с любым из предыдущих методов:

const themeColor = document.getElementById('color-picker').value;
// use with inline style
document.body.style=`--theme-color: ${themeColor};`;
// use in CSSOM
const stylesheet = document.styleSheets[0];
stylesheet.insertRule(`:root { --theme-color: ${themeColor}; }`); 

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

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

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

Поддержка кода с пользовательскими свойствами проще, чем кода с измененной CSSOM: тут нужно отслеживать меньше изменений. Но при этом вам нужен доступ к таблицам стилей.

Когда стоит применять пользовательские свойства

• Вам нужно внести комплексные изменения стилей во время выполнения программы.
• Вы хотите создать новые отношения между стилевыми свойствами.
• Вам нужно пробить Shadow DOM, чтобы стилизовать множество веб-компонентов.

Итоги

Когда вам в очередной раз понадобится изменить CSS-стили при помощи JavaScript, спросите себя:

• Это предопределенное изменение или значение стиля определяется динамически во время работы программы?
• Я перекрываю существующие сторонние стили?
• Мне нужно изменить один элемент или несколько, включая псевдоэлементы и классы?
• Хочу ли я, чтобы это изменение повлияло на несколько производных свойств или затронуло несколько элементов на странице?

Исходя из ответов на эти вопросы, можно подобрать наиболее подходящий способ внесения изменений в CSS-стили.

Перевод статьи «How to Change CSS Styles with JavaScript – From Basic to Advanced Methods».