伪元素用于向某些选择器设置特殊效果。
已存在元素是指DOM中存在的,伪元素则是虚拟的一种,样式也是给这个虚拟的元素使用的。
比如伪元素 :before和:after,用于在css渲染中向元素的头部或尾部插入内容,它们不受文档约束,也不影响文档本身,只影响最终样式。
这些添加的内容不会出现在DOM中,仅仅是在css渲染层中加入。
它不存在于文档中,所以js无法直接操作它。而jQuery的选择器都是基于DOM元素的,因此也并不能直接操作伪元素。
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');
使用CSSStyleSheet的insertRule来为伪元素修改样式
var latestContent = "新修改的内容";
// 兼容IE浏览器
document.styleSheets[0].addRule('.jadeId::before','content: "' + latestContent + '"');
// 支持非IE的现代浏览器
document.styleSheets[0].insertRule('.jadeId::before { content: "' + latestContent + '" }', 0);
注意