Изменение стилей псевдоэлементов CSS с помощью JavaScript

Ответ 1

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

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

CSS

.hidden-scrollbar::-webkit-scrollbar {
   visibility: hidden;
}

JavaScript

document.getElementById("editor").classList.add('hidden-scrollbar');

Чтобы потом удалить тот же класс, вы можете использовать:

document.getElementById("editor").classList.remove('hidden-scrollbar');

Ответ 2

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

Здесь ссылка на метод, который я опубликовал для добавления нового CSS для псевдоэлементов, легкая версия, где вы устанавливаете js

Javascript set CSS: после стилей

var addRule = (function (style) {
    var sheet = document.head.appendChild(style).sheet;
    return function (selector, css) {
        var propText = typeof css === "string" ? css : Object.keys(css).map(function (p) {
            return p + ":" + (p === "content" ? "'" + css[p] + "'" : css[p]);
        }).join(";");
        sheet.insertRule(selector + "{" + propText + "}", sheet.cssRules.length);
    };
})(document.createElement("style"));

addRule("p:before", {
    display: "block",
    width: "100px",
    height: "100px",
    background: "red",
    "border-radius": "50%",
    content: "''"
});

sheet.insertRule возвращает индекс нового правила, которое вы можете использовать для получения ссылки на него для него, которое может быть использовано позже для его редактирования.

Ответ 3

Если вас устраивает некоторая изящная деградация в старых браузерах, вы можете использовать CSS Vars. Определенно самый простой из методов, которые я видел здесь и в других местах.

Итак, в вашем CSS вы можете написать:

#editor {
  --scrollbar-background: #ccc;
}

#editor::-webkit-scrollbar-thumb:vertical {
  /* Fallback */
  background-color: #ccc;
  /* Dynamic value */
  background-color: var(--scrollbar-background);
}

Затем в вашем JS вы можете манипулировать этим значением в элементе #editor:

document.getElementById("#editor").style.setProperty('--scrollbar-background', localStorage.getItem("Color"));

Много других примеров манипулирования CSS-переменными с помощью JS здесь: https://eager.io/blog/communicating-between-javascript-and-css-with-css-variables/

Ответ 4

Вы не можете применять стили к psuedo-элементам в JavaScript.

Однако вы можете добавить тег <style> к заголовку своего документа (или иметь место <style id='mystyles'> и изменить его содержимое), который настраивает стили. (Это будет работать лучше, чем загрузка в другой таблице стилей, потому что встроенные теги <style> имеют более высокий приоритет, чем <link> 'd, поэтому вы не получите каскадных проблем.

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

Ответ 5

Я задал вопрос, похожий на этот вопрос, но не совсем так.

Я нашел способ извлечения и изменения стилей для псевдоэлементов и спросил, что люди думают о методе.

Мой вопрос в Извлечение или изменение правил CSS для псевдоэлементов

В принципе, вы можете получить стиль с помощью инструкции, например:

document.styleSheets[0].cssRules[0].style.backgroundColor

И измените его на:

document.styleSheets [0].cssRules [0].style.backgroundColor = newColor;

Вы, конечно, должны изменить индекс стилей и cssRules. Прочтите мой вопрос и комментарии, которые он нарисовал.

Я нашел, что это работает для псевдоэлементов, а также для "обычных" элементов/стилей.

Ответ 6

атрибут данных будет лучшим решением. См

http://pankajparashar.com/posts/modify-pseudo-elements-css/

Вы также можете использовать cssom. См. Метод 4 в приведенной выше ссылке

Ответ 7

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

Здесь много хороших примеров: Как загружать css-правила динамически в Webkit (Safari/Chrome)?

Ответ 8

Старый вопрос, но тот, с которым я столкнулся при попытке динамически изменить цвет содержимого элемента :before селектором.

Самое простое решение, которое я могу придумать, это использовать переменные CSS, решение, которое не применимо, когда был задан вопрос:

"#editor::-webkit-scrollbar-thumb:vertical {
    background: --editorScrollbarClr
}

Измените значение в JavaScript:

document.body.style.setProperty(
    '--editorScrollbarClr', 
     localStorage.getItem("Color")
);

То же самое можно сделать для других свойств.