有什么方法来选择/操作CSS伪元素,如::before和::after(和旧版本的一个分号)使用jQuery?

例如,我的样式表有以下规则:

.span::after{ content:'foo' }

我怎么能改变'foo'到'酒吧'使用香草JS或jQuery?


当前回答

尽管它们是由浏览器通过CSS呈现的,就像它们像其他真正的DOM元素一样,但伪元素本身不是DOM的一部分,因为伪元素,顾名思义,不是真正的元素,因此您不能直接使用jQuery(或任何JavaScript API,甚至是Selectors API)选择和操作它们。这适用于您试图用脚本修改其样式的任何伪元素,而不仅仅是::before和::after。

你只能在运行时通过CSSOM(想想window.getComputedStyle())直接访问伪元素样式,jQuery除了.css()之外不会公开它,这个方法也不支持伪元素。

不过,你总能找到其他方法,比如:

将样式应用到一个或多个任意类的伪元素上,然后在类之间切换(参看seucolega的回答以获得一个快速示例)——这是一种惯用的方法,因为它使用简单的选择器(伪元素没有)来区分元素和元素状态,这是它们打算使用的方式 通过修改文档样式表来操纵应用于上述伪元素的样式,这更像是一种hack

其他回答

有人评论说附加一个完整的样式元素到头部元素,如果你只做一次,这还不错,但如果你需要重置它不止一次,你最终会有大量的样式元素。所以为了防止这种情况,我在头部创建了一个带有id的空白样式元素,并像这样替换它的innerHTML:

<style id="pseudo"></style>

然后JavaScript看起来是这样的:

var pseudo = document.getElementById("pseudo");

function setHeight() {
    let height = document.getElementById("container").clientHeight;
    pseudo.innerHTML = `.class:before { height: ${height}px; }`
}

setHeight()

现在,在我的情况下,我需要这个来根据另一个元素的高度设置一个before元素的高度,它会在调整大小时发生变化,所以使用这个,我可以在每次窗口调整大小时运行setHeight(),它将正确地替换<style>。

希望这能帮助那些被困在做同样事情的人。

为什么要添加类或属性,当你可以添加一个样式头

$('head').append('<style>.span:after{ content:'changed content' }</style>')

我总是添加我自己的utils函数,就像这样。

function setPseudoElContent(selector, value) {    
    document.styleSheets[0].addRule(selector, 'content: "' + value + '";');
}

setPseudoElContent('.class::after', 'Hello World!');

或使用ES6功能:

const setPseudoElContent = (selector, value) => {    
    document.styleSheets[0].addRule(selector, `content: "${value}";`);
}

setPseudoElContent('.class::after', 'Hello World!');

我已经创建了一个jQuery插件来添加css伪规则,如使用.css()为特定的元素。

插件代码和测试用例在这里(更新的Fiddle) 用例作为简单的CSS图像弹出这里

用法:

$('body')
  .css({
    backgroundColor: 'white'
  })
  .cssPseudo('after', {
    content: 'attr(title) ", you should try to hover the picture, then click it."',
    position: 'absolute',
    top: 20, left: 20  
  })
  .cssPseudo('hover:after', {
    content: '"Now hover the picture, then click it!"'
  });

下面是HTML:

<div class="icon">
  <span class="play">
    ::before
  </span>
</div>

“before”上的计算样式是内容:“VERIFY TO WATCH”;

下面是我的两行jQuery代码,它们使用了添加一个额外的类来特别引用这个元素,然后附加一个样式标签(带一个!important标签)来改变sudo元素内容值的CSS:

$(“span.play:eq(0)”).addClass('G');

$('体').append(“<时尚>。G:在{重要内容:“NewText”!}> < /风格”);