有什么方法来选择/操作CSS伪元素，如::before和::after(和旧版本的一个分号)使用jQuery?
例如，我的样式表有以下规则:
.span::after{ content:'foo' }
我怎么能改变'foo'到'酒吧'使用香草JS或jQuery?
当前回答
在jQuery中不能选择伪元素，因为它们不是DOM的一部分。 但是你可以在父元素中添加一个特定的类，并在CSS中控制它的伪元素。
例子
jQuery:
<script type="text/javascript">
$('span').addClass('change');
</script>
在CSS中:
span.change:after { content: 'bar' }
其他回答
您可以创建一个伪属性，也可以使用一个现有的属性，并在伪元素的样式表中继承它。
var switched = false; // Enable color switching setInterval(function () { var color = switched ? 'red' : 'darkred'; var element = document.getElementById('arrow'); element.style.backgroundColor = color; // Managing pseudo-element's css // using inheritance. element.style.borderLeftColor = color; switched = !switched; }, 1000); .arrow { /* SET FICTIONAL PROPERTY */ border-left-color:red; background-color:red; width:1em; height:1em; display:inline-block; position:relative; } .arrow:after { border-top:1em solid transparent; border-right:1em solid transparent; border-bottom:1em solid transparent; border-left:1em solid transparent; /* INHERIT PROPERTY */ border-left-color:inherit; content:""; width:0; height:0; position:absolute; left:100%; top:-50%; } <span id="arrow" class="arrow"></span>
似乎它对“content”属性不起作用:(
下面是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”!}> < /风格”);
在jQuery中不能选择伪元素，因为它们不是DOM的一部分。 但是你可以在父元素中添加一个特定的类，并在CSS中控制它的伪元素。
例子
jQuery:
<script type="text/javascript">
$('span').addClass('change');
</script>
在CSS中:
span.change:after { content: 'bar' }
谢谢大家! 我设法做了我想做的事: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>
我们还可以依赖自定义属性(即CSS变量)来操作伪元素。我们可以在规范中读到:
自定义属性是普通属性，因此可以在 任何元素，都用正常的继承和级联进行解析 规则，可以使用@media等条件规则，可以在HTML的样式属性中使用，可以使用CSSOM读取或设置等。
考虑到这一点，我们的想法是在元素中定义自定义属性，伪元素将简单地继承它;因此，我们可以很容易地修改它。
1)使用内联样式:
.box:{之前 content:var(——content，“我是一个before元素”); 颜色:var(——颜色、红色); 字体大小:25 px; ｝ < div class = "盒子" > < / div > <div class="box" style="——color:blue;——content:'I am a blue element'"></div> <div class="box" style="——color:黑色"></div> . <div class="box" style="——color:#f0f;——content:'another element'"></div>
2)使用CSS和类
.box:{之前 content:var(——content，“我是一个before元素”); 颜色:var(——颜色、红色); 字体大小:25 px; ｝ .blue { ——颜色:蓝色; ——内容:“我是蓝色元素”; ｝ {布莱克 -颜色:黑色; ｝ < div class = "盒子" > < / div > <div class="box black" ></div> <div class="box blue"></div>
3)使用javascript
document.querySelectorAll (.box) [0] .style。setProperty(”——颜色”、“蓝色”); document.querySelectorAll (.box) [1] .style。setProperty("——content"， "'我是另一个元素'"); .box:{之前 content:var(——content，“我是一个before元素”); 颜色:var(——颜色、红色); 字体大小:25 px; ｝ < div class = "盒子" > < / div > < div class = "盒子" > < / div >
4)使用jQuery
$('.box').eq(0).css("--color", "blue"); /* the css() function with custom properties works only with a jQuery vesion >= 3.x with older version we can use style attribute to set the value. Simply pay attention if you already have inline style defined! */ $('.box').eq(1).attr("style","--color:#f0f"); .box:before { content:"I am a before element"; color:var(--color, red); font-size:25px; } <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <div class="box"></div> <div class="box"></div> <div class="box"></div>
它也可以用于复杂的值:
.box { ——c:“内容”; ——b:线性渐变(红、蓝); ——年代:20 px; ——p: 0 15 px; ｝ .box:{之前 内容:var (- c); 背景:var (- b); 颜色:# fff; Font-size: calc(2 * var(- s) + 5px); 填充:var (- p); ｝ < div class = "盒子" > < / div >
您可能注意到，我正在考虑var(——c,value)语法，其中value是默认值，也称为回退值。
从同一规格中，我们可以读到:
一个自定义属性的值可以用var()函数替换为另一个属性的值。var()的语法是:
Var () = Var (<custom-property-name> [， <declaration-value>]?)
函数的第一个参数是要替换的自定义属性的名称。如果提供了该函数的第二个参数，则是一个回退值，当引用的自定义属性无效时，将其用作替换值。
后来:
在属性值中替换var():
If the custom property named by the first argument to the var() function is animation-tainted, and the var() function is being used in the animation property or one of its longhands, treat the custom property as having its initial value for the rest of this algorithm. If the value of the custom property named by the first argument to the var() function is anything but the initial value, replace the var() function by the value of the corresponding custom property. Otherwise, if the var() function has a fallback value as its second argument, replace the var() function by the fallback value. If there are any var() references in the fallback, substitute them as well. Otherwise, the property containing the var() function is invalid at computed-value time.
如果我们不设置自定义属性，或者我们将其设置为初始值，或者它包含一个无效值，那么将使用回退值。如果我们想将自定义属性重置为默认值，使用initial会很有帮助。
相关的
如何存储继承值内的CSS变量(又称自定义属性)?
CSS自定义属性(变量)框模型
