Измените стиль: before и: после псевдоэлементов?

Ответ 1

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

Однако вы можете косвенно изменить свой стиль, добавив новый элемент style, содержащий новые правила. Например:

http://jsfiddle.net/sjFML/

Начальный CSS присваивает псевдоэлемент :before зеленым фоном, который превращается в черный, вставляя новый элемент style.

HTML:

<div id="theDiv"></div>

CSS

#theDiv {
    height: 100px;
    background: red;
}

#theDiv:before {
    content:' ';
    display: block;
    width: 50px;
    height: 50px;
    background: green;
}

JavaScript:

var styleElem = document.head.appendChild(document.createElement("style"));

styleElem.innerHTML = "#theDiv:before {background: black;}";

Ответ 2

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

Допустим, у вас есть элемент:

<div class="thing1">hi here</class>

И у вас есть стиль ::after для CSS:

.thing1::after {
    content:"I am what comes ::after a thing :)";
    display: inline-block;
    background-color: #4455ff;
    padding:3px;
    border: 1px solid #000000;    }

И вы хотите изменить содержимое и цвет фона псевдоэлемента :: after с помощью javascript. Для этого создайте второе правило CSS с изменениями, которые вы хотите применить, и укажите текущее имя класса и добавьте к нему совершенно новое имя класса. Допустим, я хочу немного изменить содержимое и цвет фона и оставить все остальное без изменений:

.thing1.extra_stuff::after {
  content:"Some parts of me, changed!";
  background-color: #8888cc;    }

Теперь вы можете просто запустить событие javascript onclick, которое применит эти два новых правила к элементу, добавив имя второго класса к элементу :) yay

function change_the_after_attribute(thing_button) {
    thing_button.className="thing1 extra_stuff";    }

https://jsfiddle.net/bt8n26a5/

забавные примечания стороны:

Вы можете использовать thing_button.classList.add("extra_stuff"); и thing_button.classList.remove("extra_stuff");, чтобы сделать эту функцию применимой ко многим различным элементам с множеством разных имен классов, а также иметь возможность удалять ваши изменения!

Используйте переменную вместо строки "extra_stuff", чтобы изменить то, что вы добавляете, более динамично.

Ответ 3

Существует также решение с помощью CSS-переменных (или пользовательских свойств):

var style = document.querySelector('.foo').style;
style.setProperty('--background', 'url(http://placekitten.com/200/300)');

.foo::before {
  background: var(--background);
  content: '';
  display: block;
  width: 200px;
  height: 300px;
}

<div class="foo"></div>