在前端开发中我们会经常用到伪元素,有时候需要通过js来修改伪元素的样式,那么有哪几种方式来修改伪元素的样式呢?
在解决这个问题之前先看看有哪些伪元素,伪元素有六个,分别是 ::after、::before、::first-line、::first-letter、::selection、::backdrop 。常用的是 ::after和::before。
伪元素用来做什么呢?
CSS 伪元素用于向某些选择器设置特殊效果。 使用伪元素来表示元素中的一些特殊位置 比如:
首字母::first-letter ,首行::first-line ,:brfore 表示元素最前面的部分,一般before都需要和content一起使用 ,:after 表示元素最后面的部分,一般after都需要和content一起使用 通过content可以向before和after添加一些内容,这些内容不能被选中。
伪元素的语法是什么样的?
伪元素的语法: selector:pseudo-element {property:value;}
CSS类也可以使用伪元素: selector.class:pseudo-element {property:value;}
在CSS3中,建议伪元素使用两个冒号(::)语法,而不是一个冒号 (:),目的是为了区分伪类和伪元素。大多数浏览器都支持这两种表示语法。只有 ::selection 永远只能以两个冒号开头(::)。因为IE8只支持单冒号的语法,所以,如果你想兼容IE8,保险的做法是使用单冒号。
伪元素有哪些特点呢?
1、通过伪元素添加的内容不能被选中
2、伪元素添加的内容不会出现在DOM中,仅仅是在CSS渲染层中加入,所以不能直接通过js来获取
3、只能通过修改样式表的方式来修改伪元素。
这就绕到了我们开头的问题,首先看第一种方式,修改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');
第二种方式在 <head> 标签中插入 <style> 的内部样式:
<!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></style>
</head>
<body>
<div class="red"></div>
<div id="blanc">id</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(function(){
document.styleSheets[0].insertRule('.red::before { color: green ;content:"oooooiii"}', 0); // 支持非IE的现代浏览器
})
</script>
</body>
</html>
第三种方式使用CSSStyleSheet的insertRule来为伪元素修改样式:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="red"></div>
<div id="blanc">id</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(function(){
var style = document.createElement("style");
document.head.appendChild(style);
sheet = style.sheet;
// sheet.addRule('.red::before', 'color: green'); // 兼容IE浏览器
sheet.insertRule('.red::before { color: green;content:"232213323131" }', 0); // 支持非IE的现代浏览器
sheet.insertRule("#blanc { color: red }", 1);
})
</script>
</body>
</html>
第二种方式和第三种方式基本是一样的,我不推荐这两种方式,我更倾向于第一种方式,修改伪元素的样式,建议使用通过更换class来修改样式的方法。因为其他两种通过插入行内CSSStyleSheet的方式是在JavaScript中插入字符代码,不利于样式与控制分离;而且字符串拼接易出错。
以上便是通过js修改伪元素样式的方法,希望对你有所帮助。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。