使用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()
,也不支持伪元素的方法不会公开该样式
但是,您始终可以找到其他解决方法,例如:
- 将样式应用于一个或多个任意类的伪元素,然后在类之间切换(请参见快速示例)-这是惯用的方法,因为它使用简单的选择器(伪元素不是)来区分元素和元素状态,这是它们打算使用的方式
- 通过修改文档样式表来操纵应用于所述伪元素的样式,这更像是一种黑客行为
<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(数据内容)‘您可能需要的任何其他文本’;
}
一种有效但效率不高的方法是向文档中添加一个包含新内容的规则,并使用类引用它。根据需要,该类可能需要内容中每个值的唯一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}”);
您可能认为这是一个简单的问题,jQuery还可以做其他任何事情。不幸的是,问题归结为一个技术问题:css:after和:before规则不是DOM的一部分,,因此不能使用jQuery的DOM方法进行更改
有一些方法可以使用JavaScript和/或CSS变通方法来操作这些元素;您使用哪一种取决于您的具体要求
我将从被广泛认为是“最佳”的方法开始: 1) 添加/删除预定类 在这种方法中,您已经使用不同的
:after
或:before
样式在CSS中创建了一个类。稍后在样式表中放置此“新”类,以确保其覆盖:
p:before {
content: "foo";
}
p.special:before {
content: "bar";
}
然后,您可以使用jQuery(或vanilla JavaScript)轻松添加或删除此类:
$('p')。在('click',function()上{
$(this.toggleClass('special');
});代码>
p:before{
内容:“富”;
颜色:红色;
光标:指针;
}
p、 特别:以前{
内容:“酒吧”;
}
这是一段
这是另一段。
以下是HTML:
<div class="icon">
<span class="play">
::before
</span>
</div>
::之前
“之前”的计算样式为内容:“验证以观看”代码>
下面是我的两行jQuery,它使用了添加一个额外的类来专门引用这个元素,然后添加一个样式标记(带有一个!重要标记)来更改sudo元素内容值的CSS的想法:
$(“span.play:eq(0)”).addClass('G')代码>
$('body').append(.G:before{content:'NewText'!important}”)代码>如果您想完全通过CSS操作::before或::after sudo元素,可以在JS中进行操作。见下文
jQuery('head').append('<style id="mystyle" type="text/css"> /* your styles here */ </style>');
jQuery('head')。追加('/*您的样式在这里*/');
请注意
元素如何具有ID,如果您的样式发生动态更改,您可以使用该ID删除它并再次附加到它
通过这种方式,在JS的帮助下,您的元素通过CSS完全符合您的风格。谢谢大家!
我设法做到了我想要的:D
来看看
我想让外部div的不透明度不同于内部div的不透明度,只需单击somwewhere;)
谢谢
$('ena')。在('click',函数(){
$('head').append('ena:before{opacity:0.3;}”);
});
$('duop')。关于('click',函数(e){
$('head').append('ena:before{opacity:0.8;}”);
e、 停止传播();
});
#埃纳{
宽度:300px;
高度:300px;
边框:1px黑色实心;
位置:相对位置;
}
#二重唱{
不透明度:1;
位置:绝对位置;
顶部:50px;
宽度:300px;
高度:100px;
背景色:白色;
}
#埃娜:以前{
内容:attr(以前的数据);
颜色:白色;
光标:指针;
位置:绝对位置;
背景色:红色;
不透明度:0.9;
宽度:100%;
身高:100%;
}
埃纳p
duoyyyyyyyyyyyyyyyyyyyyyy p
这是进入的方式:船尾
css = {
before: function(elem,attr){
if($("#cust_style") !== undefined){
$("body").append("<style> " + elem + ":before {" + attr + "} </style>");
} else {
$("#cust_style").remove();
$("body").append("<style> " + elem + ":before {" + attr + "} </style>");
}
}, after: function(elem,attr){
if($("#cust_style") !== undefined){
$("body").append("<style> " + elem + ":after {" + attr + "} </style>");
} else { $("#cust_style").remove();
$("body").append("<style> " + elem + ":after {" + attr + "} </style>");
}
}
}
css.after("someElement"," content: 'Test'; position: 'absolute'; ") // editing / adding styles to :after
css.before( ... ); // to affect the before pseudo element.
$('head').append('<style>.span:after{ content:'changed content' }</style>')
<div id="something">Test</div>
#something:before{
content:"1st";
font-size:20px;
color:red;
}
#something{
content:'1st';
}
.activeS:before{
color:green !important;
font-size:30px !important;
}
<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>
<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);
}