Вот как выглядит мой код:
$('.mainSpan:before').css('background','url(_gfx/cmn/main_bg.png)');
Это не работает, поэтому я спрашиваю, можно ли добавить фоновые изображения для теневых элементов с помощью jQuery.
Вот как выглядит мой код:
$('.mainSpan:before').css('background','url(_gfx/cmn/main_bg.png)');
Это не работает, поэтому я спрашиваю, можно ли добавить фоновые изображения для теневых элементов с помощью jQuery.
Невозможно напрямую получить доступ к псевдоэлементам с помощью Javascript, поскольку они не являются частью DOM. Вы можете прочитать их стиль, используя необязательный второй аргумент - который больше всего, хотя и не все, браузеры в текущей поддержке поддержки - в .getComputedStyle()
, но вы не можете напрямую изменить их стиль.
Однако вы можете косвенно изменить свой стиль, добавив новый элемент style
, содержащий новые правила. Например:
Начальный 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;}";
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"
, чтобы изменить то, что вы добавляете, более динамично.
Существует также решение с помощью 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>