• document.styleSheets


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

    静态方法:

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

    动态方法:

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

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

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

     1 <!DOCTYPE html>
     2 <title>CSS</title>
     3 
     4 <style>
     5     body {
     6         font: 200%/1.45 charter;
     7     }
     8     ref::before {
     9         content: '0A7';
    10         letter-spacing: .1em;
    11     }
    12 </style>
    13 
    14 <article>The seller can, under Business Law <ref>1782</ref>, offer a full refund to buyers. </article>
    15 
    16 <script>
    17     function ruleSelector(selector) {
    18         function uni(selector) {
    19             return selector.replace(/::/g, ':')
    20         }
    21         return Array.prototype.filter.call(Array.prototype.concat.apply([], Array.prototype.map.call(document.styleSheets, function(x) {
    22             return Array.prototype.slice.call(x.cssRules);
    23         })), function(x) {
    24             return uni(x.selectorText) === uni(selector);
    25         });
    26     }
    27 
    28     var toggle = false, 
    29         pseudo = ruleSelector("ref::before").slice(-1);
    30 
    31     document.querySelector("article").onclick = function() {
    32         pseudo.forEach(function(rule) {
    33             console.log(rule)
    34             if (toggle = !toggle)
    35                 rule.style.color = "red";
    36             else
    37                 rule.style.color = "black";
    38         });
    39     }
    40 </script>

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

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

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

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

    var pseudo = document.styleSheets[25].cssRules[7];
    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;  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获取的一样。

  • 相关阅读:
    webpack查缺补漏
    使用express、react、webpack打包、socket.io、mongodb、ant.design、less、es6实现聊天室
    理解restful 架构 && RESTful API设计指南
    socket.io
    数学图形(1.7)圆内旋轮线
    数学图形(1.6)抛物线
    数学图形(1.5)克莱线
    数学图形(1.4)心形线
    数学图形(1.3)旋轮线
    数学图形(1.2)Sin曲线
  • 原文地址:https://www.cnblogs.com/haimingpro/p/4208169.html
Copyright © 2020-2023  润新知