有什么方法来选择/操作CSS伪元素,如::before和::after(和旧版本的一个分号)使用jQuery?
例如,我的样式表有以下规则:
.span::after{ content:'foo' }
我怎么能改变'foo'到'酒吧'使用香草JS或jQuery?
有什么方法来选择/操作CSS伪元素,如::before和::after(和旧版本的一个分号)使用jQuery?
例如,我的样式表有以下规则:
.span::after{ content:'foo' }
我怎么能改变'foo'到'酒吧'使用香草JS或jQuery?
当前回答
这里有很多答案,但没有一个答案有助于操作: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”,这是一个动态值。
我希望这对你们有帮助
其他回答
谢谢大家! 我设法做了我想做的事: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>
下面是访问: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');
你也可以将内容传递给带有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';
}
一种有效但不太有效的方法是在文档中添加带有新内容的规则,并用类引用它。根据需要,类可能需要为内容中的每个值提供唯一的id。
$("<style type='text/css'>span.id-after:after{content:bar;}</style>").appendTo($("head"));
$('span').addClass('id-after');
如果你想完全通过CSS来操作::before或::after sudo元素,你可以用JS来做。见下文;
jQuery('head').append('<style id="mystyle" type="text/css"> /* your styles here */ </style>');
注意<style>元素是如何具有一个ID的,如果样式动态变化,可以使用该ID删除它并再次添加到它。
这样,在JS的帮助下,你的元素就可以完全按照你想要的样式通过CSS进行样式化。