如何修改伪元素的content属性的值
原创
前面一篇文章我们了解如何用js控制伪元素的样式，接下来我们看看如何修改伪元素的content属性，因为伪元素并不存在在dom中，所以我们只能通过修改样式表的方式来修改content内容，除了修改样式表还有另外一种方式。
首先我们看如何通过修改样式表的方式修改伪元素content的内容，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* a::after { content: attr(href); } */
a::before { content: "之前的内容"; }
</style>
</head>
<body>
<a href="" class="red">a</a>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(function(){
//获取原先的内容
var formerContent = window.getComputedStyle($('.red')[0], '::before').getPropertyValue('content');
console.log("formerContent", formerContent)
var latestContent = formerContent.replace(/\"/g, "")+"修改的内容";
//修改内容
document.styleSheets[0].insertRule('.red::before { content: "' + latestContent + '" }', 0);
})
</script>
</body>
</html>这里需要注意下，代码中获取的content中的值是带有双引号的，如果要使用的话需要去除双引号。
第二种方式我们使用css的attr函数来指定content的内容指向，然后修改其指向的data-属性：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.red::before {
content: attr(data-attr);
color: red;
}
</style>
</head>
<body>
<div data-attr="2222" class="red">
111111
</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(function(){
//获取原先的内容
$('.red').attr('data-attr',"99999")
})
</script>
</body>
</html>以上便是使用js修改伪元素content的使用方式，希望对你有所帮助。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读