有什么方法来选择/操作CSS伪元素，如::before和::after(和旧版本的一个分号)使用jQuery?
例如，我的样式表有以下规则:
.span::after{ content:'foo' }
我怎么能改变'foo'到'酒吧'使用香草JS或jQuery?
当前回答
这是我第一次在给出我自己的答案之前没有阅读所有给出的答案，所以我希望这不会让我…
在我的情况下，这是需要的图标附加到一个，div和按钮元素，这与<i class="icon-class"></i>的工作有点不同，因为他们没有icon-class类。添加class="icon-class"会破坏样式。
相反，我为它们添加了一个数据图标属性，其中的值应该在element:: {content: "HERE"}之前，然后这个相当简单的JavaScript就会处理剩下的事情。
{
const fakeIcons = document.querySelectorAll('[data-icon]')
for (const iconElement of fakeIcons) {
const fakeClass = 'fake-' + Array.from(Array(20), () => Math.floor(Math.random() * 36).toString(36)).join('')
const beforeContent = iconElement.getAttribute('data-icon')
iconElement.classList.add(fakeClass)
const style = document.createElement('style')
style.type = 'text/css'
style.innerHTML = `
.${fakeClass}::before {
content: "${beforeContent}" !important;
}
`
document.getElementsByTagName('head')[0].appendChild(style)
}
}
代码解释道:
选择具有指定属性(data-icon)的所有元素 循环遍历它们 随机生成一个以fake-开头的类名，后面跟着一个随机的字母数字字符串 获取data-icon属性的值 向元素中添加随机生成的类 在伪元素设置内容之前为::创建样式 在<head> HTML元素的末尾添加样式
其他回答
下面是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”!}> < /风格”);
这是我第一次在给出我自己的答案之前没有阅读所有给出的答案，所以我希望这不会让我…
在我的情况下，这是需要的图标附加到一个，div和按钮元素，这与<i class="icon-class"></i>的工作有点不同，因为他们没有icon-class类。添加class="icon-class"会破坏样式。
相反，我为它们添加了一个数据图标属性，其中的值应该在element:: {content: "HERE"}之前，然后这个相当简单的JavaScript就会处理剩下的事情。
{
const fakeIcons = document.querySelectorAll('[data-icon]')
for (const iconElement of fakeIcons) {
const fakeClass = 'fake-' + Array.from(Array(20), () => Math.floor(Math.random() * 36).toString(36)).join('')
const beforeContent = iconElement.getAttribute('data-icon')
iconElement.classList.add(fakeClass)
const style = document.createElement('style')
style.type = 'text/css'
style.innerHTML = `
.${fakeClass}::before {
content: "${beforeContent}" !important;
}
`
document.getElementsByTagName('head')[0].appendChild(style)
}
}
代码解释道:
选择具有指定属性(data-icon)的所有元素 循环遍历它们 随机生成一个以fake-开头的类名，后面跟着一个随机的字母数字字符串 获取data-icon属性的值 向元素中添加随机生成的类 在伪元素设置内容之前为::创建样式 在<head> HTML元素的末尾添加样式
如果你想完全通过CSS来操作::before或::after sudo元素，你可以用JS来做。见下文;
jQuery('head').append('<style id="mystyle" type="text/css"> /* your styles here */ </style>');
注意<style>元素是如何具有一个ID的，如果样式动态变化，可以使用该ID删除它并再次添加到它。
这样，在JS的帮助下，你的元素就可以完全按照你想要的样式通过CSS进行样式化。
我在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("");
}
);
只需要在之前或之后设置伪样式来继承，然后用javascript设置父样式。
例如，我想改变:before的颜色样式，然后我设置:
.my-style::before{
color: inherit;
}
然后我用javascript改变了.my-style元素的颜色样式:
document.querySelector(".my-style").style.color = red;
工作完成了，超级简单
