极客教程如何使用JavaScript / jQuery选择和操作CSS伪元素
在本文中，我们将学习如何使用JavaScript（或jQuery）选择和操作CSS伪元素。CSS伪元素允许开发人员使用类似::before和::after的选择器来样式化和增强HTML文档的特定部分，提供了添加装饰性内容、修改布局和创建独特视觉效果的灵活性。在这里，我们使用JavaScript或jQuery方法来操作CSS伪元素。
CSS伪元素是添加到选择器的关键字，可以让您为所选元素的特定部分指定样式。例如，为元素的首字母或首行设置样式。
方法1：使用JavaScript
选择和操作CSS伪元素的第一种方法是使用JavaScript。在这种方法中，我们将使用CSS的::after伪元素来操作其样式等。
示例： 下面的示例演示了使用JavaScript选择和操作::after伪元素。
JavaScript代码中，我们给.myclass元素添加了一个事件监听器。当鼠标悬停在元素上时，data-content属性会被更新为“这是悬停后的内容”。当鼠标移出元素时，data-content属性会重置为“这是后面的内容”。
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.myclass::after {
content: attr(data-content);
color: green;
font-size: 30px
}
</style>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h2>
How to select and manipulate CSS
pseudo-elements in JavaScript
</h2>
<div class="myclass" data-content="This is After"></div>
<script>
document.addEventListener("DOMContentLoaded",
function () {
let myclass = document.querySelector('.myclass');
myclass.addEventListener("mouseover",
function () {
myclass.setAttribute('data-content',
'This is Hovered After');
});
myclass.addEventListener("mouseout",
function () {
myclass.setAttribute('data-content',
'This is After');
});
});
</script>
</body>
</html>
输出:
方法2：使用jQuery
选择和操作CSS伪元素的第二种方法是使用jQuery。在这里，我们将使用attr()函数，该函数允许您检索属性的值并将其用作CSS属性的值。
示例： 下面的示例演示了使用jQuery的after伪元素、attr()和hover()方法的选择和操作。
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.myclass::after {
content: attr(data-content);
color: green;
}
</style>
<script src=
"https://code.jquery.com/jquery-3.6.0.min.js">
</script>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h2>How to select and manipulate CSS
pseudo-elements jQuery
</h2>
<div class="myclass"
data-content="This is After">
</div>
<script>
(document).ready(function () {
('.myclass').hover(
function () {
(this).attr('data-content',
'This is Hovered After');
},
function () {
(this).attr('data-content', '');
}
);
});
</script>
</body>
</html>
输出：
