伪元素是不能选中的，如果非要改他的样式，两个方法。

静态方法：

addClass的时候，新add的class带有新的伪元素。

动态方法：

如果知道它在document.styleSheets对象中的位置，直接抓出来.style=改写

但是我们怎么可能知道它的位置呢，除非用for循环查找。

于是就有牛人写了一个伪查找：

 <!DOCTYPE html>

 <title>CSS</title>

 <style>

     body {

         font: %/1.45 charter;

     }

     ref::before {

         content: '\00A7';

         letter-spacing: .1em;

     }

 </style>

 <article>The seller can, under Business Law <ref></ref>, offer a full refund to buyers. </article>

 <script>

     function ruleSelector(selector) {

         function uni(selector) {

             return selector.replace(/::/g, ':')

         }

         return Array.prototype.filter.call(Array.prototype.concat.apply([], Array.prototype.map.call(document.styleSheets, function(x) {

             return Array.prototype.slice.call(x.cssRules);

         })), function(x) {

             return uni(x.selectorText) === uni(selector);

         });

     }

     var toggle = false,

         pseudo = ruleSelector("ref::before").slice(-);

     document.querySelector("article").onclick = function() {

         pseudo.forEach(function(rule) {

             console.log(rule)

             if (toggle = !toggle)

                 rule.style.color = "red";

             else

                 rule.style.color = "black";

         });

     }

 </script>

之所以说他牛，是因为他用了好多call啊apply啊return啊concat啊map啊，把Array的原型都改了。

说他伪查找，是因为最后ruleSelector("ref::before").slice(-1)这为什么是倒数第一个，就只有他自己知道了。

比如我做的实验，就是倒数第二个，谁写最后面谁第一个。

真的查找，显然开销是很大的，如果后端需要改一些不能动html的页面样式，可以考虑直接console手动找出来，例如：

var pseudo = document.styleSheets[].cssRules[];

pseudo.style.left = start+"px";

上面是修改第25个css样式表文件中的第7条规则中的left值。整个cssRules对象如下：

{style: CSSStyleDeclaration, selectorText: ".historylist .sl-item::after", parentRule: null, parentStyleSheet: CSSStyleSheet, cssText: ".historylist .sl-item::after { content: ''; positi… opacity: 0; background-color: rgb(22, 22, 22); }"…}cssText: ".historylist .sl-item::after { content: ''; position: absolute; top: 8px; left: 54px; width: 100px; height: 45px; display: block; z-index: -1; border-radius: 45px; opacity: 0; background-color: rgb(22, 22, 22); }"parentRule: nullparentStyleSheet: CSSStyleSheetselectorText: ".historylist .sl-item::after"style: CSSStyleDeclarat...

其中.style可以获取一个对象，就是一般dom对象.style获取的一样。

document.styleSheets的更多相关文章

  1. document.styleSheets[0]是个啥

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. 样式声明对象：document.styleSheets[0].rules[4].style;

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. JavaScript学习笔记——DOM_对document对象的内容、属性、样式的操作

    javascript-对文档对象的内容.属性.样式的操作 一.操作内容 1. innerHTML 用来设置或获取对象起始和结束标签内的内容(识别html标签) 2. innerText 用来设置或获取 ...

  4. javascript高级程序设计---document节点

    document节点是文档的根节点,每张网页都有自己的document节点,window.document就是指向这个节点.只要浏览器开始载入文档,这个节点就开始了 对于HTML文档来说,docume ...

  5. js操作styleSheets

    document.styleSheets这个接口可以获取网页上引入的link样式表和style样式表.比如 最后的输出结果如下. 换下代码看看我们具体的styleSheets具体输出什么 这些都是次要 ...

  6. jacascript document对象

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! Document 类型表示文档,或文档的根节点,这个节点是隐藏的,没有具体的节点标签:而 html 是根标 ...

  7. (87)Wangdao.com第二十天_JavaScript document 节点对象

    document 节点对象, 代表整个文档,每张网页都有自己的 document 对象. window.document 当浏览器开始加载文档时就存在了 正常的网页使用 document 或者 win ...

  8. document的属性操作

    document对象: 1.直接操作: 对象.属性 = 值; 如下面一段代码: <a href  = "...">跳转</a> <script> ...

  9. Document节点

    概述 document节点对象代表整个文档,每张网页都有自己的document对象.window.document属性就指向这个对象.只要浏览器开始载入 HTML 文档,该对象就存在了,可以直接使用. ...

随机推荐

  1. Java基础知识强化之集合框架笔记50：Map集合之Map集合的概述和特点

    1. Map集合的概述: public interface Map<K,V> 作为学生来说,是根据学号来区分不同的学生的,那么假设我现在已经知道了学生的学号,我要根据学号去获取学生姓名,请 ...

  2. 关于js中伪数组

    伪数组: 具有length属性: 按索引方式存储数据: 不具有数组的push().pop()等方法: 伪数组无法直接调用数组方法或期望length属性有什么特殊的行为,不具有数组的push().pop ...

  3. RedHat7上安装MariaDB

    编译安装MariaDB 下载MariaDB# wget http://mirrors.opencas.cn/mariadb//mariadb-10.1.8/source/mariadb-10.1.8. ...

  4. codeforces 132C Logo Turtle(dp)

    可以用三维dp来保存状态, dp[i][j][k]表示在前i个字符变换了j步之后方向为k(k = 1 or k = 0)的最优解,也就是离原点的最大距离.这里规定0方向为正方向,1位负方向,表示的是当 ...

  5. 让IE支持Css3属性（圆角、阴影、渐变）

    >>>>>>>>>>>>>>>>>>>>>>>>> ...

  6. Android-关于屏幕适配的一些经验

    刚开始,我开发时选取的模拟器是WVGA854,其分辨率为854*480.我开发完毕后装在800*480的手机上时感觉很OK,但是装到480*320.以及320*240分辨率上的手机时,很多界面都变形了 ...

  7. PHP 数组转字符串，与字符串转数组

    implode 使用一个字符串将数组变成字符串 <?php $array = array('lastname', 'email', 'phone'); $comma_separated = im ...

  8. 规划收发你的邮件，使用qq邮箱接收阿里云企业邮邮件

    使用qq邮箱接收阿里企业邮 首先管理员开通企业邮后会发来激活短信 根据短信提示打开https://qiye.aliyun.com企业邮登陆地址 使用短信提供的密码登陆邮箱 首次登陆时会让我们重设密码 ...

  9. [弹出消息] C#MessageBox帮助类 （转载）

    点击下载 MessageBox.rar 主要功能如下所示1.显示消息提示对话框 2.控件点击 消息确认提示框 3.显示消息提示对话框,并进行页面跳转 4.输出自定义脚本信息 /// <summa ...

  10. winform程序中界面的跳转问题

    首先是我们进行窗口间的跳转,尤其注意的是winform程序里面的空间都是中线程安全的.但是注意的是如果你在一个线程中操纵另外的控件,这时候会提示你一个错误,这个错误的解决方法准备单独的在另一篇文章中来 ...