使用javascript(或jQuery)选择和操作CSS伪元素，如::before和::after

有人评论说附加一个完整的样式元素到头部元素，如果你只做一次，这还不错，但如果你需要重置它不止一次，你最终会有大量的样式元素。所以为了防止这种情况，我在头部创建了一个带有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>。

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

2017-09-22 08:31:19

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

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

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

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

2011-02-18 12:56:29

你可以使用我的插件来实现这个目的。

JQuery:

应该指定值，就像在jQuery.css的普通函数中一样

此外，你还可以获得pseudo-element参数的值，就像在jQuery.css的普通函数中一样:

console.log( $(element).cssBefore(parameter) );

JS:

GitHub: https://github.com/yuri-spivak/managing-the-properties-of-pseudo-elements/

2017-07-31 18:19:08

在jQuery中不能选择伪元素，因为它们不是DOM的一部分。但是你可以在父元素中添加一个特定的类，并在CSS中控制它的伪元素。

例子

jQuery:

<script type="text/javascript">
    $('span').addClass('change');
</script>

在CSS中:

span.change:after { content: 'bar' }

2011-03-17 06:46:46

这里有很多答案，但没有一个答案有助于操作: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”，这是一个动态值。

我希望这对你们有帮助

2016-11-14 13:25:10

下面是访问: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');

2014-07-15 21:55:01

使用javascript(或jQuery)选择和操作CSS伪元素，如::before和::after

推荐文章

最新文章

标签