Изменение стилей псевдоэлементов CSS с помощью JavaScript - PullRequest
Новая
       39

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

51 голосов
/ 19 декабря 2010

Можно ли изменить стиль псевдоэлемента CSS с помощью JavaScript?

Например, я хочу динамически установить цвет полосы прокрутки следующим образом: 

document.querySelector("#editor::-webkit-scrollbar-thumb:vertical").style.background = localStorage.getItem("Color");

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

document.querySelector("#editor::-webkit-scrollbar").style.visibility = "hidden";

Однако оба этих сценария возвращают:

Uncaught TypeError: Невозможно прочитать свойство 'style'из null

Есть ли какой-то другой способ сделать это?
Взаимодействие между браузерами не важно, мне просто нужно, чтобы оно работало в браузерах webkit.

Ответы [ 6 ]

28 голосов
/ 31 августа 2012

РЕДАКТИРОВАТЬ : Технически является способом прямого изменения стилей псевдоэлементов 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');
19 голосов
/ 08 ноября 2011

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

Вот ссылка на метод, который я опубликовал для добавления нового 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 возвращает индекс нового правила, которое вы можете использовать для получения ссылки на него, которое можно использовать позже для его редактирования.

13 голосов
/ 18 апреля 2018

Если вас устраивает некоторая изящная деградация в старых браузерах, вы можете использовать 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 голосов
/ 08 ноября 2011

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

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

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

3 голосов
/ 08 октября 2015

Я опубликовал вопрос, похожий на этот вопрос, но не полностью похожий на него.

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

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

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

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

И изменить егоwith:

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

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

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

0 голосов
/ 19 декабря 2010

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

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

...