window.getComputedStyle(ele,null)
这个函数可以获取dom对象的css的显示的属性。函数的第二个参数基本上直接填了null,而这个参数实际上就是解决伪元素的。
window.getComputedStyle(ele,'after');
window.getComputedStyle(ele,'before');
看如下代码:
<div class="demo"> </div> <script type="text/javascript"> var div=document.getElementsByTagName('div')[0]; </script>
.demo{ width:100px; height:100px; background-color:red; display:inline-block; } .demo::after{ content:""; width:10px; height:10px; display:inline-block; background-color:green; }
我可以通过上面的方法获得div的after伪元素的css属性
比较多吧,基本上所有的css属性都出现了,这个是一个类数组吧,满足数组和对象的特点。
我们看看有没有我们设置的属性。
的确都是存在的。rgb(0,128,0)就是green,有一点值得注意的是,因为‘-’并不是js识别的字符,这个不是下划线,所以对于这样的用小驼峰式就好了。
有一点值得注意,伪元素的属性,通过这样的方法是不可能改的
只可以读,不可以写。
但是我想改一下伪元素的属性怎么办了。
譬如这个我点击这红色的div,然后把div::after就是这个绿色的变成橙色的。
咋搞?
改值不存在的。
看如下代码:
<div class="demo" > </div> <script type="text/javascript"> var div=document.getElementsByTagName('div')[0]; div.onclick=function() { div.className='demo1'; } </script>
.demo{ width:100px; height:100px; background-color:red; display:inline-block; } .demo::after{ content:""; width:10px; height:10px; display:inline-block; background-color:green; } .demo1{ width:100px; height:100px; background-color:red; display:inline-block; } .demo1::after{ content:""; width:10px; height:10px; display:inline-block; background-color:orange; }
我们把div的class换了,然后自动就会选择.demo1::after咯,
方法很笨,还有有用的。