js如何动态选择和操作 CSS 伪元素,例如 ::before 和 ::after

时间:?2021-10-14阅读:?15标签:?伪元素

什么是伪元素

伪元素用于向某些选择器设置特殊效果。
已存在元素是指DOM中存在的,伪元素则是虚拟的一种,样式也是给这个虚拟的元素使用的。
比如伪元素 :before和:after,用于在css渲染中向元素的头部或尾部插入内容,它们不受文档约束,也不影响文档本身,只影响最终样式。这些添加的内容不会出现在DOM中,仅仅是在css渲染层中加入。它不存在于文档中,所以js无法直接操作它。而jQuery的选择器都是基于DOM元素的,因此也并不能直接操作伪元素。


哪些是伪元素

  • :first-letter:向文本的第一个字母添加特殊样式。 
  • :first-line: 向文本的首行添加特殊样式。 
  • :before:在元素之前添加内容。 
  • :after:在元素之后添加内容。 
  • ::placeholder:匹配占位符的文本,只有元素设置了placeholder属性时,该伪元素才能生效。(只支持双冒号的形式)。
  • ::selection:CSS伪元素应用于文档中被用户高亮的部分(比如使用鼠标或其他选择设备选中的部分)。(只支持双冒号的形式)。 
  • ::backdrop(处于试验阶段):用于改变全屏模式下的背景颜色,全屏模式的默认颜色为黑色。(只支持双冒号的形式)。


更改伪元素的样式

1.更换class来实现伪元素属性值的更改:

// CSS代码
.red::before { content: "red"; color: red; }
.green::before { content: "green"; color: green; }

// html代码
<div class="red">测试测试</div>

// jQuery代码
$(".red").removeClass('red').addClass('green');

2.使用CSSStyleSheet的insertRule来为伪元素修改样式:

// html代码
<div class="red">测试测试</div>

//js代码,支持IE
document.styleSheets[0].addRule('.red::before','content: "red";color: red;');
//支持非IE的现代浏览器
document.styleSheets[0].insertRule('.red::before { content: "red";color: red; }', 0);

addRule说明:

document.styleSheets[0].addRule('.className'或‘#ID’ +‘::after’,css样式字符串拼接).

3.在标签中插入

// HTML代码
<div class="red">测试测试</div>

//js代码
var style = document.createElement("style");
document.head.appendChild(style);
sheet = style.sheet;
//兼容IE浏览器
sheet.addRule('.red::before','content: "red";color: red;'); 
//支持非IE的现代浏览器
sheet.insertRule('.red::before { content: "red";color: red; }', 0);

// 亦可以使用 JQuery:
$('<style>.red::before{content: "red";color:red;}</style>').appendTo('head');


修改伪元素的content的属性值

使用CSSStyleSheet的insertRule来为伪元素修改样式

var latestContent = "新修改的内容";
// 兼容IE浏览器
document.styleSheets[0].addRule('.jadeId::before','content: "' + latestContent + '"');
// 支持非IE的现代浏览器
document.styleSheets[0].insertRule('.jadeId::before { content: "' + latestContent + '" }', 0);

注意

  • 伪元素的 content 属性很强大,可以写入各种字符串和部分多媒体文件。但是伪元素的内容只存在于CSS渲染树中,并不存在于真实的DOM中。所以为了seo优化,最好不要在伪元素中包含与文档相关的内容。

  • 修改伪元素的样式,建议使用通过更换class来修改样式的方法。因为其他两种通过插入行内CSSStyleSheet的方式是在JavaScript中插入字符代码,不利于样式与控制分离;而且字符串拼接易出错。

  • 修改伪元素的content属性的值,建议使用利用DOM的 data-* 属性来更改。


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.pannellisolari.net/article/detial/10733

内容以共享,参考,研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

Baidu