有什么方法来选择/操作CSS伪元素,如::before和::after(和旧版本的一个分号)使用jQuery?
例如,我的样式表有以下规则:
.span::after{ content:'foo' }
我怎么能改变'foo'到'酒吧'使用香草JS或jQuery?
有什么方法来选择/操作CSS伪元素,如::before和::after(和旧版本的一个分号)使用jQuery?
例如,我的样式表有以下规则:
.span::after{ content:'foo' }
我怎么能改变'foo'到'酒吧'使用香草JS或jQuery?
当前回答
我在CSS中使用:root中定义的变量来修改:after(同样适用于:before)伪元素,特别是在下面使用JavaScript/jQuery生成随机颜色的演示中,更改由. slide -middle-out:hover:after定义的样式锚的背景颜色值和另一个锚(#reference)的内容值:
HTML
<a href="#" id="changeColor" class="sliding-middle-out" title="Generate a random color">Change link color</a>
<span id="log"></span>
<h6>
<a href="https://stackoverflow.com/a/52360188/2149425" id="reference" class="sliding-middle-out" target="_blank" title="Stack Overflow topic">Reference</a>
</h6>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/davidmerfield/randomColor/master/randomColor.js"></script>
CSS
:root {
--anchorsFg: #0DAFA4;
}
a, a:visited, a:focus, a:active {
text-decoration: none;
color: var(--anchorsFg);
outline: 0;
font-style: italic;
-webkit-transition: color 250ms ease-in-out;
-moz-transition: color 250ms ease-in-out;
-ms-transition: color 250ms ease-in-out;
-o-transition: color 250ms ease-in-out;
transition: color 250ms ease-in-out;
}
.sliding-middle-out {
display: inline-block;
position: relative;
padding-bottom: 1px;
}
.sliding-middle-out:after {
content: '';
display: block;
margin: auto;
height: 1px;
width: 0px;
background-color: transparent;
-webkit-transition: width 250ms ease-in-out, background-color 250ms ease-in-out;
-moz-transition: width 250ms ease-in-out, background-color 250ms ease-in-out;
-ms-transition: width 250ms ease-in-out, background-color 250ms ease-in-out;
-o-transition: width 250ms ease-in-out, background-color 250ms ease-in-out;
transition: width 250ms ease-in-out, background-color 250ms ease-in-out;
}
.sliding-middle-out:hover:after {
width: 100%;
background-color: var(--anchorsFg);
outline: 0;
}
#reference {
margin-top: 20px;
}
.sliding-middle-out:before {
content: attr(data-content);
display: attr(data-display);
}
JS / jQuery
var anchorsFg = randomColor();
$( ".sliding-middle-out" ).hover(function(){
$( ":root" ).css({"--anchorsFg" : anchorsFg});
});
$( "#reference" ).hover(
function(){
$(this).attr("data-content", "Hello World!").attr("data-display", "block").html("");
},
function(){
$(this).attr("data-content", "Reference").attr("data-display", "inline").html("");
}
);
其他回答
下面是访问: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');
尽管它们是由浏览器通过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>。
希望这能帮助那些被困在做同样事情的人。
在jQuery中不能选择伪元素,因为它们不是DOM的一部分。 但是你可以在父元素中添加一个特定的类,并在CSS中控制它的伪元素。
例子
jQuery:
<script type="text/javascript">
$('span').addClass('change');
</script>
在CSS中:
span.change:after { content: 'bar' }
你也可以将内容传递给带有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';
}