专栏首页Vue开发社区js如何动态选择和操作 CSS 伪元素,例如 ::before 和 ::after

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

什么是伪元素

伪元素用于向某些选择器设置特殊效果。

已存在元素是指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-* 属性来更改。
文章分享自微信公众号:
前端开发社区

本文参与 腾讯云自媒体分享计划 ,欢迎热爱写作的你一起参与!

原始发表时间:2021-11-12
如有侵权,请联系 cloudcommunity@tencent.com 删除。
登录 后参与评论
0 条评论

相关文章

  • 理解CSS伪元素 :before 和 :after

    层叠样式表(CSS)的主要目的是给HTML元素添加样式,然而,在一些案例中给文档添加额外的元素是多余的或是不可能的。事实上CSS中有一个特性允许我们添加额外元素...

    疯狂的技术宅
  • CSS 3.0中伪元素after和before的妙用

    我们常用CSS 3.0中的伪元素来修饰一些细节,让页面看起来效果更好,比如下面这个图片中的面包屑导航中的符号,还有任务清单前的序列符号,都是用伪元素实现的。

    越陌度阡
  • 【CSS】1049- 深入了解::before 和 ::after 伪元素

    本文从最简单的开始,解释如何理解和使用::before和::after。然后再在实际使用场景中去应用它。

    pingan8787
  • :before,:after伪元素妙用

    这两个伪元素分别表示元素内容的【前】【后】,利用这两个伪元素可以在元素内容的前后添加内容,其实这没有什么前后的概念,如果应用了absolute的特性之后,你可以...

    IMWeb前端团队
  • :before,:after伪元素妙用

    本文作者:IMWeb 黎清龙 原文出处:IMWeb社区 未经同意,禁止转载 这两个伪元素分别表示元素内容的【前】【后】,利用这两个伪元素可以在元素内容...

    IMWeb前端团队
  • 我不知道你知不知道但前端NEXT知道的伪元素小技巧

    腾讯NEXT学位
  • js 动态修改_after_before伪元素content值

    今天做了一个有关js如何绑定动态修改伪类的content的内容,运用到的有( :before 和 :after 伪元素、CSS content 属性、data-...

    前端小tips
  • 我不知道你知不知道我知道的伪元素小技巧

    伪元素能做什么?我们要他有何用?它能为我们解决什么问题?和其他的方法相比她有什么有点?我们为什么要使用它?

    sunseekers
  • 8个硬核技巧带你迅速提升CSS技术

    笔者选择了一些常用甚至有些小册都未提及到的干货作为分享内容,相信这些内容能帮助同学们在短期内提升CSS编码素质,实现一些看似只能由JS才能实现的效果。

    javascript艺术
  • 如何提升CSS技术?8个硬核技巧带你迅速提升CSS技术

    整个分享过程不搞那些乱七八糟的环境搭建。既然只玩CSS,那只有html文件和css文件就足够了。另外还需一个浏览器Chrome和一个编辑器VSCode。

    睡魔的谎言
  • CSS魔法堂:一起玩透伪元素和Content属性

     继上篇《CSS魔法堂:稍稍深入伪类选择器》记录完伪类后,我自然而然要向伪元素伸出“魔掌”的啦^_^。本文讲讲述伪元素以及功能强大的Contet属性,让我们可以...

    ^_^肥仔John
  • 国庆节前端技术栈充实计划(3):仅使用CSS做一个漂亮的动画加载页面

    利用伪元素、关键帧动画,你将具有强大的创造力,本文就是一个例子。本例中,利用两者,就可以构建一个加载动画,无需任何JS代码和图片。

    疯狂的技术宅
  • CSS3伪类和伪元素的特性和区别

    前端er们大都或多或少地接触过CSS伪类和伪元素,比如最常见的:focus,:hover以及<a>标签的:link、visited等,伪元素较常见的比如:bef...

    寒月十八
  • 从零开始学 Web 之 CSS3(一)CSS3概述,选择器

    CSS3是CSS(层叠样式表)技术的升级版本,主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。

    Daotin
  • 如何更改伪元素的样式

    在前端开发中我们会经常用到伪元素,有时候需要通过js来修改伪元素的样式,那么有哪几种方式来修改伪元素的样式呢?

    挥刀北上
  • CSS3伪类和伪元素的特性及两者的区别

    前端工作者肯定或多或少地接触过CSS伪类和伪元素,比如最常见的:focus,:hover以及<a>标签的:link、visited等,伪元素较常见的比如:bef...

    德顺
  • 我可能学到了“假”的CSS:伪类伪元素

    ==在*-child系列伪类中,索引是相对于所有同级兄弟元素计算的,而非特定类型==

    江米小枣

扫码关注腾讯云开发者

领取腾讯云代金券