极客教程JavaScript 如何更新伪元素 ::after 和 ::before 的属性
在本文中，我们将学习如何使用JavaScript选择和更新伪元素 ::after 和 ::before 的 CSS 属性。 HTML元素（如<div>，<h1>，<p>等）可以使用document.getElementById()和其他相关的JavaScript方法轻松选择，但是选择伪元素需要采用稍微不同的方法。
要选择和更新伪元素的CSS属性，我们可以使用document.styleSheets[i].cssRules属性。 这个方法返回包括第i个样式表中的所有CSS规则的CSS样式规则对象。 我们可以选择任何CSS样式规则并更新规则。
语法：
let obj = document.styleSheets[0].cssRules;
document.styleSheets[0] 方法将返回附加到文档的第一个样式表。 document.styleSheets[0].cssRules 将返回一个类似数组的对象，其中包含与文档的所有元素相关的所有CSS规则。
示例 1： 在下面的示例中，我们创建了一个HTML文档，并将样式应用于该文档的元素。我们创建了一个div和一个div的伪元素::after。还创建了一个按钮，用于更新div伪元素的CSS属性。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<style>
#box {
width: max-content;
height: auto;
background-color: green;
padding: 40px;
color: white;
font-size: 20px;
font-weight: 200;
position: relative;
}
#box::after {
position: absolute;
content: '::after peseudo element';
top: 0;
left: 100%;
padding: 40px;
color: white;
width: max-content;
height: auto;
background-color: orangered;
font-size: 20px;
font-weight: 200;
}
</style>
</head>
<body>
<h2 style="color: green;">
GeeksforGeeks
</h2>
<h3>
How to update the CSS properties
of pseudo element ::after and
::before using javascript
</h3>
<div id="box">
Hello Geek!
</div>
<br>
<button onclick="changeColorPseudoEle()">
ChangeContent_of_::after_element
</button>
<script>
const changeColorPseudoEle = () => {
// Selecting the "#box::after" CSS
// rule from rule list
let st = document.styleSheets[0].cssRules[1];
// Change the styles of the selected
// pseudo element
st.style.content = '"Content Changed!"';
}
</script>
</body>
</html>
输出：
在上面的代码中， document.styleSheets[0].cssRules[1] 会选择第一个样式表（索引为0）中的第一个样式规则（索引为1）。第一个样式规则是”#box::after”。选择了”#box::after”样式规则后， CSSrule.style.content 属性将改变”#box::after”样式规则的内容。
示例2： 在下面的示例中，我们添加了一个伪元素::before，并使用javascript方法来改变::after和::before的颜色。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<style>
#box {
width: max-content;
height: auto;
background-color: green;
padding: 40px;
color: white;
font-size: 20px;
font-weight: 200;
position: relative;
margin-left: 300px;
}
#box::after {
position: absolute;
content: '::after peseudo element';
top: 0;
left: 100%;
padding: 40px;
color: white;
width: max-content;
height: auto;
background-color: orangered;
font-size: 20px;
font-weight: 200;
}
#box::before {
position: absolute;
content: '::before peseudo element';
top: 0%;
right: 100%;
padding: 40px;
color: white;
width: max-content;
height: auto;
background-color: darkcyan;
font-size: 20px;
font-weight: 200;
}
</style>
</head>
<body>
<h2 style="color: green;">
GeeksforGeeks
</h2>
<h3>
How to update the CSS properties
of pseudo element ::after and
::before using javascript
</h3>
<div id="box">
Hello Geek!
</div>
<br>
<button onclick="changeColorPseudoEle()">
Changebgcolor_of_::after_and_ ::before_element
</button>
<script>
const changeColorPseudoEle = () => {
// Selecting the "#box::after" CSS
// rule from rule list.
let st1 = document.styleSheets[0].cssRules[1];
let st2 = document.styleSheets[0].cssRules[2];
// Change the styles of the pseudo element.
st1.style.backgroundColor = 'blue';
st2.style.backgroundColor = 'crimson';
}
</script>
</body>
</html>
输出：
在上面的代码中， document.styleSheets[0].cssRules[1] 方法将选择第一个索引的CSS样式规则，即“#box::after”， document.styleSheets[0].cssRules[2] 方法将选择第二个索引的CSS规则，即“#box::before”。之后， CSSrule.style.backgroundColor 方法将更改所选伪元素的背景色。