有什么方法来选择/操作CSS伪元素,如::before和::after(和旧版本的一个分号)使用jQuery?
例如,我的样式表有以下规则:
.span::after{ content:'foo' }
我怎么能改变'foo'到'酒吧'使用香草JS或jQuery?
有什么方法来选择/操作CSS伪元素,如::before和::after(和旧版本的一个分号)使用jQuery?
例如,我的样式表有以下规则:
.span::after{ content:'foo' }
我怎么能改变'foo'到'酒吧'使用香草JS或jQuery?
当前回答
下面是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”!}> < /风格”);
其他回答
只需要在之前或之后设置伪样式来继承,然后用javascript设置父样式。
例如,我想改变:before的颜色样式,然后我设置:
.my-style::before{
color: inherit;
}
然后我用javascript改变了.my-style元素的颜色样式:
document.querySelector(".my-style").style.color = red;
工作完成了,超级简单
如果你想完全通过CSS来操作::before或::after sudo元素,你可以用JS来做。见下文;
jQuery('head').append('<style id="mystyle" type="text/css"> /* your styles here */ </style>');
注意<style>元素是如何具有一个ID的,如果样式动态变化,可以使用该ID删除它并再次添加到它。
这样,在JS的帮助下,你的元素就可以完全按照你想要的样式通过CSS进行样式化。
你也可以将内容传递给带有data属性的伪元素,然后使用jQuery来操作它:
在HTML中:
<span>foo</span>
jQuery:
$('span').hover(function(){
$(this).attr('data-content','bar');
});
在CSS中:
span:after {
content: attr(data-content) ' any other text you may want';
}
如果你想阻止“其他文本”出现,你可以将此与seucolega的解决方案结合起来,如下所示:
在HTML中:
<span>foo</span>
jQuery:
$('span').hover(function(){
$(this).addClass('change').attr('data-content','bar');
});
在CSS中:
span.change:after {
content: attr(data-content) ' any other text you may want';
}
这里有很多答案,但没有一个答案有助于操作: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”,这是一个动态值。
我希望这对你们有帮助
在jQuery中不能选择伪元素,因为它们不是DOM的一部分。 但是你可以在父元素中添加一个特定的类,并在CSS中控制它的伪元素。
例子
jQuery:
<script type="text/javascript">
$('span').addClass('change');
</script>
在CSS中:
span.change:after { content: 'bar' }