首页 > 代码库 > document.styleSheets

document.styleSheets

2024-10-27 04:04:39   209人阅读

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

静态方法：

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: ‘\00A7‘;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             else37                 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; 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


联系
我们