博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
如何读写伪类元素的样式?
阅读量:6173 次
发布时间:2019-06-21

本文共 1438 字,大约阅读时间需要 4 分钟。

示例: 

Html代码  
  1. <class="example" data-pseudo="(i'm content.)">Hi, this is a plain-old, sad-looking paragraph tag.</p>  
  2. <div id="log"></div>  
  3.   
  4. <style>  
  5. .example::before {  
  6.     content: 'pseudoElement ';  
  7.     color: red;  
  8. }  
  9. </style>  

一、读取,使用 window.getComputedStyle 方法: 

Js代码  
  1. <script>  
  2. var str = window.getComputedStyle(document.querySelector('.example'), '::before').getPropertyValue('color');  
  3.   
  4. document.querySelector('#log').innerHTML = str;  
  5.   
  6. </script>  

二、写(修改)
 
没有办法。至少没有直接的方法,退而次之,只能通过覆盖样式的途径来达到我们的目的。 
譬如:添加一个style元素,并写入新的样式;又或者是给目标元素添加不同的class,以达到控制的效果。 
示例: 

Html代码  
  1. <style id="pseudoStyle">  
  2. </style>  

Js代码  
  1. <script>  
  2.     document.querySelector('#pseudoStyle').sheet.insertRule(".example::before { color: green;}",0);  
  3.     //或者是  
  4.     document.querySelector('#pseudoStyle').sheet.addRule('.example::before','color: green');  
  5.   
  6.     //setProperty在这时候,会抛异常:  
  7.     try{  
  8.         window.getComputedStyle(document.querySelector('.example'), '::before').setProperty('color',"green");  
  9.     }catch(e){  
  10.         document.querySelector('#log').innerHTML =  e;  
  11.     }  
  12. </script>  

伪类元素,有个属性比较特殊:content。由于它的值可以定义为从元素的dom属性获取,从而可以实现js的直接读写。 
例如: 

Html代码  
  1. <style>  
  2. .example::before {  
  3.     content: attr(data-pseudo);  
  4.     color: red;  
  5. }  
  6. </style>  

Js代码  
  1. <script>  
  2.     document.querySelector('.example').setAttribute("data-pseudo","new content!");  
  3. </script>  

附录: 
1. styleSheet对象的方法、属性和浏览器兼容,参考:http://help.dottoro.com/ljpatulu.php 
2. getComputedStyle方法,参考:http://help.dottoro.com/ljscsoax.php , https://developer.mozilla.org/en/docs/Web/API/window.getComputedStyle

转载地址:http://uamba.baihongyu.com/

你可能感兴趣的文章
移动app可开发的意见于分析
查看>>
周总结7
查看>>
类似OutLook布局的开源控件XPanderControls
查看>>
Web前端工程师成长之路——知识汇总
查看>>
[2018-9-4T2]探索黑暗dark
查看>>
【学术信息】中科院2019年学术期刊分区-综合性期刊
查看>>
ShareObject离线存储相关
查看>>
C++ XML
查看>>
windows批处理 打开exe后关闭cmd
查看>>
Flask开发系列之快速入门
查看>>
关于SaveChanges
查看>>
php7扩展开发 一 获取参数
查看>>
处女座与复读机
查看>>
Laravel 5.2数据库--迁移migration
查看>>
ExtJs Extender controls 不错的例子
查看>>
html的基础知识
查看>>
Mybatis Sql片段的应用
查看>>
突发奇想20150126
查看>>
Nginx + CGI/FastCGI + C/Cpp
查看>>
学习笔记------jsp页面与jsp标记
查看>>