修改:before和:after伪元素的样式？

Question

这是我的代码外观：

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

这似乎不起作用，所以我想知道是否可能使用jQuery将背景图像添加到具有阴影效果的元素中。

- macksol

---

“检索简写的CSS属性（例如margin，background，border），虽然在某些浏览器中功能正常，但不能保证。”尝试将'background'替换为backgroundImage，并阅读jQuery文档。 - pathfinder

你能展示一下你的HTML标记吗？ - Alex Shilman

Answer 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;}";

- Ben Jackson

Answer 2

还有一种使用 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>

查看浏览器支持情况请参见Can I use，这里是Ponyfill的链接（与Polyfill相同，但需要调用函数）。

Ponyfill适用于链接和样式CSS中的CSS，但如果使用以下代码，您可以像使用setProperty设置变量（它仅在不支持CSS Variables的浏览器中运行，例如IE11）。

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

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

<div class="foo"></div>
<script src="https://unpkg.com/css-vars-ponyfill@2/dist/css-vars-ponyfill.min.js"></script>

很不幸，cssVar ponyfill 像在 :root 上设置变量一样是全局的。如果你需要支持IE11或其他旧版本浏览器，可以尝试寻找更好的polyfill或库。

- jcubic

---

非常好的示例。谢谢。 - Emre Sert

Answer 3

更改 ::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" 字符串，以更动态地更改您要添加的内容。

- cake

---

2022年，这个解决方案仍然像魔法一样有效。 - ironixx

谢谢您提供的信息，以及关于2022年的说明。这真的帮了我大忙！ - tobinfekkes