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

Question

这就是我的代码:

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

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

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

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>

有关浏览器支持，请参阅我可以使用，这里是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 是全局的，就像设置 var on 一样:root。如果你需要支持 IE11 或其他旧浏览器，你可以尝试搜索更好的 polyfill 或 library。

Answer 3

这是可能的元素之后，但不能直接改变::值。要偷偷摸摸。适用于所有浏览器。

假设您有一个元素：

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

并且您得到了::afterCSS样式：

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