更改 :before 和 :after 伪元素的样式？ [复制]

Posted 2023-02-22

【中文标题】更改 :before 和 :after 伪元素的样式？ [复制]

【英文标题】：Change the style of :before and :after pseudo-elements? [duplicate]

【发布时间】：2014-01-28 17:27:41

【问题描述】：

这是我的代码的样子：

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

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

【问题讨论】：

api.jquery.com/css -- “检索速记 CSS 属性（例如，边距、背景、边框），虽然在某些浏览器中可用，但不能保证。”尝试用 backgroundImage 替换 'background' 并阅读 jQuery 文档。

你能显示你的 html 标记吗？

【参考方案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;";

【讨论】：

嘿，谢谢，这是个好主意。

这实际上回答了这个问题，因为有一个案例（我的案例）并非所有 :after 样式都可以预先创建。大多数都是用css预先编写的，但需要通过js添加的是url到背景图像。所以我添加了激活其余:after css的类，但是我必须能够通过js将背景图片url直接添加到元素的:after样式中。

好主意，谢谢@Ben Jackson

这节省了我的时间。

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

【讨论】：

到 2022 年，这个解决方案仍然很有效。

【参考方案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 一样。如果您需要支持 IE11 或其他旧浏览器，您可以尝试搜索更好的 polyfill 或库。

【讨论】：

很好的样品。谢谢。