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

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

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

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


当前回答

下面是访问:after和:before样式属性的方法,在css中定义:

// Get the color value of .element:before
var color = window.getComputedStyle(
    document.querySelector('.element'), ':before'
).getPropertyValue('color');

// Get the content value of .element:before
var content = window.getComputedStyle(
    document.querySelector('.element'), ':before'
).getPropertyValue('content');

其他回答

下面是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”!}> < /风格”);

这里有很多答案,但没有一个答案有助于操作:before或:after的css,甚至不是公认的答案。

以下是我的建议。让我们假设你的HTML是这样的:

<div id="something">Test</div>

然后你在CSS中设置它的:before并像这样设计它:

#something:before{
   content:"1st";
   font-size:20px;
   color:red;
}
#something{
  content:'1st';
}

请注意,我还在元素本身设置了内容属性,以便稍后可以轻松取出。 现在有一个按钮点击,你想改变的颜色:before绿色和它的字体大小为30px。您可以通过以下方法实现:

在一些类.active上定义一个样式符合你要求的css:

.activeS:before{
   color:green !important;
   font-size:30px !important;
 }

现在你可以通过添加类到你的:before元素来改变:before样式,如下所示:

<button id="changeBefore">Change</button>
<script>
    $('#changeBefore').click(function(){
        $('#something').addClass('activeS');
    });
</script>

如果你只是想获取:之前的内容,可以这样做:

<button id="getContent">Get Content</button>
<script>
    $('#getContent').click(function(){
        console.log($('#something').css('content'));//will print '1st'
    });
</script>

最终如果你想通过jQuery动态改变:before内容,你可以实现如下:

<button id="changeBefore">Change</button>
<script>
    var newValue = '22';//coming from somewhere
    var add = '<style>#something:before{content:"'+newValue+'"!important;}</style>';
    $('#changeBefore').click(function(){
        $('body').append(add);
    });
</script>

点击上面的“changeBefore”按钮将更改:在#something的内容之前变为“22”,这是一个动态值。

我希望这对你们有帮助

这是我第一次在给出我自己的答案之前没有阅读所有给出的答案,所以我希望这不会让我…

在我的情况下,这是需要的图标附加到一个,div和按钮元素,这与<i class="icon-class"></i>的工作有点不同,因为他们没有icon-class类。添加class="icon-class"会破坏样式。

相反,我为它们添加了一个数据图标属性,其中的值应该在element:: {content: "HERE"}之前,然后这个相当简单的JavaScript就会处理剩下的事情。

    {
        const fakeIcons = document.querySelectorAll('[data-icon]')

        for (const iconElement of fakeIcons) {

            const fakeClass = 'fake-' + Array.from(Array(20), () => Math.floor(Math.random() * 36).toString(36)).join('')
            const beforeContent = iconElement.getAttribute('data-icon')

            iconElement.classList.add(fakeClass)

            const style = document.createElement('style')
            style.type = 'text/css'
            style.innerHTML = `

                .${fakeClass}::before {
                    content: "${beforeContent}" !important;
                }

            `
            document.getElementsByTagName('head')[0].appendChild(style)
        }
    }

代码解释道:

选择具有指定属性(data-icon)的所有元素 循环遍历它们 随机生成一个以fake-开头的类名,后面跟着一个随机的字母数字字符串 获取data-icon属性的值 向元素中添加随机生成的类 在伪元素设置内容之前为::创建样式 在<head> HTML元素的末尾添加样式

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

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

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

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

谢谢大家! 我设法做了我想做的事:D http://jsfiddle.net/Tfc9j/42/ 让我们来看看

我想有一个外部div的不透明度是不同于内部div的不透明度和改变点击somwewhere;) 谢谢!

   $('#ena').on('click', function () {
        $('head').append("<style>#ena:before { opacity:0.3; }</style>");
    });

$('#duop').on('click', function (e) {

        $('head').append("<style>#ena:before { opacity:0.8; }</style>");

     e.stopPropagation(); 
    });

#ena{
    width:300px;
    height:300px;
    border:1px black solid;
    position:relative;
}
#duo{
    opacity:1;
    position:absolute;
    top:50px;
  width:300px;
    height:100px;
      background-color:white;
}
#ena:before {
    content: attr(data-before);
    color: white;
    cursor: pointer;
    position: absolute;
    background-color:red;
    opacity:0.9;
    width:100%;
    height:100%;
}


<div id="ena">
    <div id="duo">
        <p>ena p</p>
        <p id="duop">duoyyyyyyyyyyyyyy p</p>

    </div>   


</div>