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

静态方法：

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. End-to-End Tracing of Ajax/Java Applications Using DTrace

    End-to-End Tracing of Ajax/Java Applications Using DTrace         By Amit Hurvitz, July 2007     Aja ...

  2. 【转】iOS应用崩溃日志揭秘

    这篇文章还可以在这里找到 英语 If you're new here, you may want to subscribe to my RSS feed or follow me on Twitter ...

  3. python学习笔记--Django入门一 网页显示时间

    我的笔记是学习http://djangobook.py3k.cn/ 课程时做的,这个上边的文章讲的确实是非常的详细,非常感谢你们提供的知识. 上一篇随笔中已经配置好了Django环境,现在继续跟随ht ...

  4. 必应代码搜索 Bing Code Search 安装

    微软这几天推出基于bing搜索引擎的  Bing Code Search ,可直接在浏览器上搜索和运行代码.目前中文版必应无法使用本功能,有需要的同学可以转到英文版进行搜索: 英文版必应:  http ...

  5. awk实用技巧

    awk '{sum+=$1} END {print "Sum = ", sum}' awk '{sum+=$1} END {print "Average = " ...

  6. java-字符串学习总结

    Java字符串类(java.lang.String)是Java中使用最多的类,也是最为特殊的一个类. String 类相关基础认知: 1.String类是final的,不可被继承.public fin ...

  7. 牛皮市和猴市的好工具和指标：BOLL

    (转贴)布林线BOLL用法 布林线是股市中经常用到的技术指标之一,它反映了股价的波动状况.山版软件指标图中的布林线由三条组成,上边的白线(up)是阻力线,下边的黄线(down)是支撑线,中间的粉红线( ...

  8. [上传下载] C# ImageUpload图片上传类教程与源码下载 （转载）

    点击下载 ImageUpload.zip 功能如下图片1.设置属性后上传图片,用法如下 /// <summary> /// 图片上传类 /// </summary> //--- ...

  9. struts -执行流程

    When a client request is given, a web container will receive request Web container loads web.xml and ...

  10. A题笔记（3）

    No. 1381 容器相关 #include <vector> 头文件 vector<Presents> present; present.push_back(name); 向 ...