改变样式：before和：after伪元素？

Question

这就是我的代码：

$('.mainSpan:before').css('background','url(_gfx/cmn/main_bg.png)');

这似乎不起作用所以我问是否有可能使用jQuery将背景图像添加到阴影元素。

Answer 1

使用Javascript直接访问伪元素是不可能的，因为它们不是DOM的一部分。你可以在which most, although not all, browsers in current use support中使用可选的第二个参数 - .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;}";

Answer 2

可以更改:: 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;    }

并且您想使用javascript更改:: after伪元素的内容和背景颜色。要执行此操作，请使用要应用的更改制作第二个CSS规则，并同时具有当前类名并为其添加全新的类名。所以，假设我想稍微更改内容和背景颜色，并保留其余内容，相同：

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

现在，您可以通过向元素中添加第二个类名称来触发将该两个新规则应用于该元素的onclick javascript事件:)

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"字符串来更改动态添加的内容。