如何修改伪元素的content属性的值 |
您所在的位置:网站首页 › vue修改meta标签修改content › 如何修改伪元素的content属性的值 |
前面一篇文章我们了解如何用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 |