如何修改伪元素的content属性的值

您所在的位置:网站首页 vue修改meta标签修改content 如何修改伪元素的content属性的值

如何修改伪元素的content属性的值

2023-08-17 00:43| 来源: 网络整理| 查看: 265

前面一篇文章我们了解如何用js控制伪元素的样式,接下来我们看看如何修改伪元素的content属性,因为伪元素并不存在在dom中,所以我们只能通过修改样式表的方式来修改content内容,除了修改样式表还有另外一种方式。

首先我们看如何通过修改样式表的方式修改伪元素content的内容,代码如下:

Document /* a::after { content: attr(href); } */ a::before { content: "之前的内容"; } a $(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); })

这里需要注意下,代码中获取的content中的值是带有双引号的,如果要使用的话需要去除双引号。

第二种方式我们使用css的attr函数来指定content的内容指向,然后修改其指向的data-属性:

Document .red::before { content: attr(data-attr); color: red; } 111111 $(function(){ //获取原先的内容 $('.red').attr('data-attr',"99999") })

以上便是使用js修改伪元素content的使用方式,希望对你有所帮助。



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3