使用javascript(或jQuery)选择和操作CSS伪元素,如::before和::after
是否有任何方法可以使用jQuery选择/操作CSS伪元素,例如使用javascript(或jQuery)选择和操作CSS伪元素,如::before和::after,javascript,jquery,css,jquery-selectors,pseudo-element,Javascript,Jquery,Css,Jquery Selectors,Pseudo Element,是否有任何方法可以使用jQuery选择/操作CSS伪元素,例如::before和::after(以及带有一个分号的旧版本) 例如,我的样式表有以下规则: .span::在{content:'foo'}之后 如何使用vanilla JS或jQuery将“foo”更改为“bar”?虽然浏览器通过CSS呈现这些元素,就好像它们是其他真实的DOM元素一样,但伪元素本身并不是DOM的一部分,因为顾名思义,伪元素不是真实的元素,因此,您不能直接使用jQuery(或者任何JavaScript API,甚至是
::before
和::after
(以及带有一个分号的旧版本)
例如,我的样式表有以下规则:
.span::在{content:'foo'}之后
如何使用vanilla JS或jQuery将“foo”更改为“bar”?虽然浏览器通过CSS呈现这些元素,就好像它们是其他真实的DOM元素一样,但伪元素本身并不是DOM的一部分,因为顾名思义,伪元素不是真实的元素,因此,您不能直接使用jQuery(或者任何JavaScript API,甚至是Java)来选择和操作它们。这适用于您试图用脚本修改其样式的任何伪元素,而不仅仅是
::before
和::after
您只能在运行时通过CSSOM(想想窗口.getComputedStyle()
)直接访问伪元素样式,jQuery beyond.css()
,也不支持伪元素的方法不会公开该样式
但是,您始终可以找到其他解决方法,例如:
- 将样式应用于一个或多个任意类的伪元素,然后在类之间切换(请参见快速示例)-这是惯用的方法,因为它使用简单的选择器(伪元素不是)来区分元素和元素状态,这是它们打算使用的方式
- 通过修改文档样式表来操纵应用于所述伪元素的样式,这更像是一种黑客行为
:before
和::after
您只能在运行时通过CSSOM(想想窗口.getComputedStyle()
)直接访问伪元素样式,jQuery beyond.css()
,也不支持伪元素的方法不会公开该样式
但是,您始终可以找到其他解决方法,例如:
- 将样式应用于一个或多个任意类的伪元素,然后在类之间切换(请参见快速示例)-这是惯用的方法,因为它使用简单的选择器(伪元素不是)来区分元素和元素状态,这是它们打算使用的方式
- 通过修改文档样式表来操纵应用于所述伪元素的样式,这更像是一种黑客行为
<script type="text/javascript">
$('span').addClass('change');
</script>
$('span').hover(function(){
$(this).attr('data-content','bar');
});
$('span').hover(function(){
$(this).addClass('change').attr('data-content','bar');
});
不能在jQuery中选择伪元素,因为它们不是DOM的一部分。 但是您可以向父元素添加特定的类,并在CSS中控制其伪元素 在jQuery中:
<script type="text/javascript">
$('span').addClass('change');
</script>
$('span').hover(function(){
$(this).attr('data-content','bar');
});
$('span').hover(function(){
$(this).addClass('change').attr('data-content','bar');
});
您还可以将内容传递给带有数据属性的伪元素,然后使用jQuery来处理: 在HTML中:
<span>foo</span>
<span>foo</span>
在CSS中:
span:after{
内容:attr(数据内容)‘您可能需要的任何其他文本’;
}
如果您想阻止“其他文本”出现,可以将其与seucolega的解决方案结合起来,如下所示:
<div id="something">Test</div>
<style id="pseudo"></style>
在HTML中:
<span>foo</span>
<span>foo</span>
在CSS中:
span.更改:之后{
内容:attr(数据内容)‘您可能需要的任何其他文本’;
}
您还可以将内容传递给带有数据属性的伪元素,然后使用jQuery来处理:
在HTML中:
<span>foo</span>
<span>foo</span>
在CSS中:
span:after{
内容:attr(数据内容)‘您可能需要的任何其他文本’;
}
如果您想阻止“其他文本”出现,可以将其与seucolega的解决方案结合起来,如下所示:
<div id="something">Test</div>
<style id="pseudo"></style>
在HTML中:
<span>foo</span>
<span>foo</span>
在CSS中:
span.更改:之后{
内容:attr(数据内容)‘您可能需要的任何其他文本’;
}
一种有效但效率不高的方法是向文档中添加一个包含新内容的规则,并使用类引用该规则。根据需要,该类可能需要内容中每个值的唯一id
$("<style type='text/css'>span.id-after:after{content:bar;}</style>").appendTo($("head"));
$('span').addClass('id-after');
$({content:bar;}之后的span.id”).appendTo($(“head”);
$('span').addClass('id-after');
一种有效但效率不高的方法是向文档中添加一个包含新内容的规则,并使用类引用该规则。根据需要,该类可能需要内容中每个值的唯一id
$("<style type='text/css'>span.id-after:after{content:bar;}</style>").appendTo($("head"));
$('span').addClass('id-after');
$({content:bar;}之后的span.id”).appendTo($(“head”);
$('span').addClass('id-after');
按照Christian的建议,您还可以:
$('head').append("<style>.span::after{ content:'bar' }</style>");
$('head').append(“.span::after{content:'bar}”);
按照Christian的建议,您还可以:
$('head').append("<style>.span::after{ content:'bar' }</style>");
$('head').append(“.span::after{content:'bar}”);
您可能认为这是一个简单的问题,jQuery可以做其他任何事情。不幸的是,问题归结为一个技术问题:css:after和:before规则不是DOM的一部分,因此不能使用jQuery的DOM方法进行更改
有几种方法可以使用JavaScript和/或CSS变通方法来操作这些元素;您使用哪种方法取决于您的具体需求
我将从被广泛认为是“最佳”的方法开始: 1) 添加/删除预定类 在这种方法中,您已经创建了一个类i
<button id="getContent">Get Content</button>
<script>
$('#getContent').click(function(){
console.log($('#something').css('content'));//will print '1st'
});
</script>
<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>
<style id="pseudo"></style>
var pseudo = document.getElementById("pseudo");
function setHeight() {
let height = document.getElementById("container").clientHeight;
pseudo.innerHTML = `.class:before { height: ${height}px; }`
}
setHeight()
function setPseudoElContent(selector, value) {
document.styleSheets[0].addRule(selector, 'content: "' + value + '";');
}
setPseudoElContent('.class::after', 'Hello World!');
const setPseudoElContent = (selector, value) => {
document.styleSheets[0].addRule(selector, `content: "${value}";`);
}
setPseudoElContent('.class::after', 'Hello World!');
<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>
: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);
}
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("");
}
);
<style>
.case-after:after { // set your properties here like eg:
color:#3fd309 !important;
}
.case-before:before { // set your properties here like eg:
color:#151715 !important;
}
</style>
// case for after
$('#button-id').on('click', function() {
$(".target-div").toggleClass('case-after');
});
// case for before
$('#button-id').on('click', function() {
$(".target-div").toggleClass('case-before');
});
<div
id="inputBoxParent"
count="0">
...
</div>
inputBoxParent.setAttribute('count', value.length)
.input-box-container::after{
content: attr(count);
}