标签:
伪元素是不能选中的,如果非要改他的样式,两个方法。
静态方法:
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 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; 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获取的一样。
标签:
原文地址:http://www.cnblogs.com/haimingpro/p/4208169.html