资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/利用javascript获取并修改伪元素的值

利用javascript获取并修改伪元素的值

SQC / 3249人阅读

摘要：利用方法选择到伪元素，然后利用方法获取对应的属性的值。具体用法可以参考的这篇文章而伪元素的属性值除了常规赋值外，还有一种特殊的方法来获取。具体实现参照，不再做具体分析参考文献获取元素值之方法熟悉

虽然标题里写的是伪元素,不过这篇文章主要是说::before和::after，其余几个伪元素（::first-letter、::first-line、::selection等)由于没有content属性，所以本文一笔带过，其实方法是一样的。
伪元素的重点在于一个伪，虽然它们可以被浏览器渲染引擎识别并正确渲染，然而伪元素本身并不是DOM元素,所以无法被js直接操作——因此任何基于JS直接选取DOM元素的CSS更改方法对伪元素都不起作用。（JQ看似万能，这个问题上是直接就栽了。因为JQ的选择符都是基于DOM元素）关于JS和JQ选择器，可以参考这两篇文档： Selectors API Level 1、jQuery Selectors

获取伪元素的属性值

虽然JS里没有可以直接操作伪元素的选择符，然而获取其CSS属性的方法还是有的。

window.getComputedStyle

利用window.getComputedStyle方法选择到伪元素，然后利用getPropertyValue方法获取对应的属性的值。
根据MDN的文档，

window.getComputedStyle(element[, pseudoElt]);

此方法包含两个参数，一个是元素本身另一个是元素的伪元素。
js语法实例（完整DEMO在线链接）：

var div=document.querySelector("div");
var fontSize=window.getComputedStyle(div,"::before").getPropertyValue("font-size");//获取before伪元素的字号大小

关于这个方法，详解可以参考这篇文章：
获取元素CSS值之getComputedStyle方法熟悉

更改伪元素的属性值

window.getComputedStyle方法虽然可以获取到伪元素的属性值，然而根据该方法名字也知道其只能获取CSS样式，并无法更改css属性，那么如果想要用js动态更改伪元素属性值的话，该怎么处理呢？
思路有以下几个：

js更改data-*属性值来更改伪元素的content值

创建多个class，通过切换class来达到改变样式的目的

利用CSSStyleSheet的insertRule方法来添加样式

利用内部css样式的高优先级来覆盖外部css

以上实现思路的推荐程度依次递减
利用DOM的data-*属性来更改content的值

data-*是HTML5新增的DOM元素属性，作用大致可以理解为标记。具体用法可以参考MDN的这篇文章.而伪元素的content属性值除了常规赋值外，还有一种特殊的attr()方法来获取。
HTML：

CSS:

.test::before{
    content: attr(data-text);
}

结果:

TEXT

另外content其实可以多个attr连写，而且attr()内的可以是DOM元素的任意属性（比如class等，甚至非W3C标准属性也支持，不过不推荐这么做)所以很方便凑一些模版文字。像下面这种写法也是完全没问题的。注意用空格连接，不要用"+"号。
EXAM：

.test::before {
  content: "我的类是" attr(class) "想要变成" attr(data-color);
}
虽然W3C给attr()赋予了无限可能性,包括color,width等属性在未来都有希望用这个方法更改，然而目前只有content支持该方法，其余的都还是草稿状态，尚未有浏览器支持。之所以把这个方法放在第一位只是因为相比别的实现手法来说，这个方法真的太简单太优雅。

但是如果真的想要改伪元素里的color等元素呢？

更改class来实现伪元素样式的更改

把这个方法放到推荐位第二位估计会被很多人骂我：“卧槽，这么简单又没逼格的办法你竟然放到第二位！太没水平了”。不过再看完后面两种方法后或许你会对这种看法有所改观。
这个方法的优点是简单好用且无兼容性问题。缺点是多了一些其实用处不大的class,很像是jQuery类选择器中毒患者的做法；另外不适合多状态的场景（比如实时改变伪元素文字大小等）。
实现过于简单就不贴代码了。

前面的class切换大法可能让人感觉不痛快，这里来个高大上(伪)点的方法：

利用CSSStyleSheet的insertRule方法来添加样式 
这部分内容和W3C标准牵连比较多，加上较冷门，没多少人关注，个人目前啃不动标准，所以这部分内容不会做深入分析，理解可能也会有问题，望斧正。

CSSStyleSheet是浏览器存放页面内所有css样式表的对象方法（不包括行内样式)，每个link和style标签都代表一个CSSStyleSheet对象，获取他们可以用document.styleSheets方法。(需要注意的是虽然styleSheets方法返回的结果把link标签引进的外部样式也算进去了，但是非IE浏览器没办法获取到他们的cssRules属性，只有内嵌的style标签内的元素可以被获取到)

document.styleSheets[0].insertRule(".test::before{color:green}",0)//chrome,firefox等非IE浏览器使用
document.styleSheets[0].addRule(".test::before{color:green}",0)//IE系列浏览器使用
/* 虽然部分浏览器也可以通过id来指定,"document.styleSheets.id.insertRule()"这种写法在chrome和IE下都行得通，但是firefox会返回"undefined",所以建议还是使用index值来获取stylesheet */

.insertRule的语法是stylesheet.insertRule(rule, index),另一个参数是index，意思是在对应的styleSheets里的cssRules样式表中的位置，这个值越大则样式优先级越高，但是值不能超过当前样式表规则（cssRules）长度（CSS中先定义的样式总是会被后定义的覆盖就是这个缘故。），当值小于cssRules长度时，添加的样式规则会插入到index值定义的位置，之前其余的规则依次顺延。

addrule和insertRule方法本质上没区别，只是后者不被IE浏览器识别，所以前者作为浏览器兼容方法存在。（下文为节省篇幅，以insertRule方法指代此两种方法。)

上面的代码看似简单一行，然而却不是每次都有效的。原因有以下几点：

document.styleSheets虽然按照style和link的顺序返回对应的StyleSheetList，然而第一个如果是link而不是style,前面讲过此时无法获取对应的cssRules，则document.styleSheets[0].cssRules为null，insertRule方法不起作用。（此情况只针对非IE浏览器，IE浏览器正常，但是定义的早往往意味着被后面的样式覆盖，所以意义不大）

同上，如果页面内没有内嵌样式的style标签，则insertRule方法也无法发挥作用。

index值不够大的话很有可能会早于css文件开始的定义位置，导致被覆盖。因此有个折衷办法就是给添加的样式增加!important，虽然我个人比较反感这么做。

由此可见此方法的局限性，但是这种方法的优雅之处在于避免了直接写内嵌样式，而是通过css api来做更改。相比下面的方法来说，稍微好点。

但是这种方法好像局限性有点大啊？

HEAD中添加style标签强制覆盖初始属性

这个方法是利用内部css样式的高优先级来覆盖外部css，好处是简单易理解，实现简单。坏处就是吃相太难看，过于粗暴。

var style=document.createElement("style");
style.innerHTML=".test::before{color:green}";//添加样式内容的话也可以用上面提到过的`insertRule`,相对例子里的硬编码会更优雅点。
document.head.appendChild(style);

看到这里可能有些人反应过来了，其实加style标签这种方法可以是insertRule实现方法的大前提——因为不是所有页面一开始都有内嵌的style样式的。这种方法虽然不是很好，但是有时候却又确确实实是必须的——比如“拖动滑块改变伪元素内文字大小”这个需求。

练习 功能需求

拖动滑块改变伪元素内的文字大小

且伪元素内随时显示当前字号

通过一个按钮可以改变伪元素内文字颜色

这个需求可以将本文前面提到的四种改变伪元素样式的方法都塞进去。具体实现参照DEMO，不再做具体分析：

http://codepen.io/chitanda/pen/OVBJEw/

参考文献

getComputedStyle()

Window.getComputedStyle()

获取元素CSS值之getComputedStyle方法熟悉

attr-notation

W3C CSS3-Attribute References: ‘attr()’

MDN ATTR()

CSSRules

CSSRule object

MDN insertRule

Dynamic style - manipulating CSS with JavaScript

Add Rules to Stylesheets with JavaScript

Modify pseudo element styles with JavaScript

Add css-rules to an existing stylesheet

idc机房托管 混合云 获取伪元素 javascript获取元素 伪元素 java修改值并显示

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91525.html

相关文章

  • 图片加载相关技术

    摘要：本小节将讨论与图片加载时机相关的技术预加载与懒加载。同样，可将请求成功与失败的回调，作为图片预加载成功与失败的处理。 目前，出于性能与灵活性方面的考虑，我们都将一些小图片替换成矢量图或者字体。除了这些能被替换的小图之外，还有一些不得不使用位图的场景，如照片、背景等。对于这些位图，我们需要考虑它们在加载过程中的不同状态，而制定不同的表现方案。 图片加载过程中的状态，大致包括： 何时决定...

    ZweiZhao 评论0 收藏0

  • 图片加载相关技术

    摘要：本小节将讨论与图片加载时机相关的技术预加载与懒加载。同样，可将请求成功与失败的回调，作为图片预加载成功与失败的处理。 目前，出于性能与灵活性方面的考虑，我们都将一些小图片替换成矢量图或者字体。除了这些能被替换的小图之外，还有一些不得不使用位图的场景，如照片、背景等。对于这些位图，我们需要考虑它们在加载过程中的不同状态，而制定不同的表现方案。 图片加载过程中的状态，大致包括： 何时决定...

    junnplus 评论0 收藏0

  • 图片加载相关技术

    摘要：本小节将讨论与图片加载时机相关的技术预加载与懒加载。同样，可将请求成功与失败的回调，作为图片预加载成功与失败的处理。 目前，出于性能与灵活性方面的考虑，我们都将一些小图片替换成矢量图或者字体。除了这些能被替换的小图之外，还有一些不得不使用位图的场景，如照片、背景等。对于这些位图，我们需要考虑它们在加载过程中的不同状态，而制定不同的表现方案。 图片加载过程中的状态，大致包括： 何时决定...

    Leo_chen 评论0 收藏0

  • Dom详解

    摘要：例子第三级的同级的第二个获取元素复制代码两个都包含的元素，一个在文档树的前面，但是它在第三级，另一个在文档树的后面，但它在第一级，通过获取元素时，它通过深度优先搜索，拿到文档树前面的第三级的元素。对象就是通过包装对象后产生的对象。 DOM JavaScript 的组成 组成部分 说明 Ecmascript 描述了该语言的语法和基本对象 DOM 描述了处理网页内容的方法和接...

    liuhh 评论0 收藏0

  • 前端面试题整理（定期更新）

    摘要：标签写在后与前有什么区别什么是预处理器后处理器预处理器例如，用来预编译或，增强了代码的复用性，还有层级变量循环函数等，具有很方便的组件模块化开发能力，极大的提高工作效率。 前言 因为面试的原因，最近又开始关注前端面试题，浏览过网上很多面试题集合，有很多小伙伴整理的很全面，但是我发现其中有很多技术点在当下已不再流行，而面试题一般都是映射开发中常遇到的一些技能和问题，再结合最近面试中遇到的...

    hizengzeng 评论0 收藏0

发表评论

登陆后可评论

0条评论

SQC

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<