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事件，将这两个新规则应用于该元素:) 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"字符串来更改动态添加的内容。

Answer 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>

浏览器支持，请参见Can I use，这里是指向Ponyfill的链接（与Polyfill相同，但您需要调用一个函数）

Ponyfill在链接和样式CSS中可以与CSS一起使用，但是如果您使用下面的代码，则可以像setProperty一样设置变量（它只能在不支持CSS变量（例如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上设置var一样。

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

3 个答案: