给before和after伪元素设置js效果的方法


Posted in Javascript onDecember 04, 2015

层叠样式表(CSS)的主要目的是给HTML元素添加样式,然而,在一些案例中给文档添加额外的元素是多余的或是不可能的。事实上CSS中有一个特性允许我们添加额外元素而不扰乱文档本身,这就是“伪元素”。

前面的话

 无法直接给before和after伪元素设置js效果 

例子说明

现在需要为(id为box,内容为"我是测试内容"的div)添加(:before内容为"前缀",颜色为红色的伪类)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<title>Document</title>
</head>
<body>

<div id="box">我是测试内容</div>
<script>

var oBox = document.getElementById('box');
</script>
</body>
</html>

解决办法

【方法一】动态嵌入CSS样式

IE8-浏览器将<style>标签当作特殊的节点,不允许访问其子节点。IE10-浏览器支持使用styleSheet.cssText属性来设置样式。兼容写法如下:

<script>
function loadStyleString(css){
  var style = document.createElement("style");
  style.type = "text/css";
  try{
    style.appendChild(document.createTextNode(css));
  }catch(ex){
    style.styleSheet.cssText = css;
  }
  var head = document.getElementsByTagName('head')[0];
  head.appendChild(style);
}
loadStyleString("#box:before{content:'前缀';color: red;}");
<script>

【方法二】添加自带伪类的类名

<style>
  .change:before{content: "前缀";color: red;}
</style> 
<script>
  oBox.className = 'change';
</script>

[缺点]此方法无法控制伪元素里面的content属性的值

【方法三】利用setAttribute实现自定义content内容

<style>
.change:before{content: attr(data-beforeData);color: red;}
</style> 
<script>
  oBox.setAttribute('data-beforeData','前缀');
</script>

[注意]此方法只可用setAttribute实现,经测试用dataset方法无效

【方法四】添加样式表

firefox浏览器不支持addRule()方法,IE8-浏览器不支持insertRule()方法。兼容写法如下:

<script>
  function insertRule(sheet,ruleKey,ruleValue,index){
  return sheet.insertRule ? sheet.insertRule(ruleKey+ '{' + ruleValue + '}',index) : sheet.addRule(ruleKey,ruleValue,index);

} 
  insertRule(document.styleSheets[0],'#box:before','content:"前缀";color: red;',0)  
</script>

[缺点]该方法必须有内部<style>或用<link>链接外部样式,否则若不存在样式表,则document.styleSheets为空列表,则报错

【方法五】修改样式表

先使用方法四添加空的样式表,然后获取新生成的<style>并使用其innerHTML属性来修改样式表

<script>
function loadStyleString(css){
  var style = document.createElement("style");
  style.type = "text/css";
  try{
    style.appendChild(document.createTextNode(css));
  }catch(ex){
    style.styleSheet.cssText = css;
  }
  var head = document.getElementsByTagName('head')[0];
  head.appendChild(style);
}
loadStyleString('');
document.head.getElementsByTagName('style')[1].innerHTML = "#oBox:before{color: " + colorValue + ";}";
</script>

[注意]只能使用getElementsByTagName('style')[1]的方法,经测验使用stylesheets[1]方法无效

DEMO

<演示框>点击下列相应属性值可进行演示

给before和after伪元素设置js效果的方法

Javascript 相关文章推荐
event.keyCode键码值表 附只能输入特定的字符串代码
May 15 Javascript
异步动态加载js与css文件的js代码
Sep 15 Javascript
Js 去掉字符串中的空格(实现代码)
Nov 19 Javascript
jQuery+ajax中getJSON() 用法实例
Dec 22 Javascript
深入理解JavaScript系列(31):设计模式之代理模式详解
Mar 03 Javascript
javascript bom是什么及bom和dom的区别
Nov 26 Javascript
总结JavaScript三种数据存储方式之间的区别
May 03 Javascript
使用jQuery制作浮动工具栏的实例分享
May 13 Javascript
微信小程序 progress组件详解及实例代码
Oct 25 Javascript
AngularJS自定义服务与fliter的混合使用
Nov 24 Javascript
xmlplus组件设计系列之网格(DataGrid)(10)
May 05 Javascript
vue+elementUI中表格高亮或字体颜色改变操作
Nov 02 Javascript
全面解析Bootstrap手风琴效果
Apr 17 #Javascript
简单对比分析JavaScript中的apply,call与this的使用
Dec 04 #Javascript
详解JavaScript的Date对象(制作简易钟表)
Apr 07 #Javascript
浅析2种JavaScript继承方式
Dec 04 #Javascript
详解jQuery移动页面开发中的ui-grid网格布局使用
Dec 03 #Javascript
浅析jQuery Mobile的初始化事件
Dec 03 #Javascript
jQuery+jsp实现省市县三级联动效果(附源码)
Dec 03 #Javascript
You might like
浅谈PHP中JSON数据操作
2015/07/01 PHP
PHP实现双链表删除与插入节点的方法示例
2017/11/11 PHP
dwr spring的集成实现代码
2009/03/22 Javascript
js判断60秒以及倒计时示例代码
2014/01/24 Javascript
使用JS取得焦点(focus)元素代码
2014/03/22 Javascript
jQuery修改class属性和CSS样式整理
2015/01/30 Javascript
利用原生JS自动生成文章标题树的实例
2016/08/22 Javascript
Javascript中arguments对象的详解与使用方法
2016/10/04 Javascript
AngularJS过滤器filter用法实例分析
2016/11/04 Javascript
JS动态的把左边列表添加到右边的实现代码(可上下移动)
2016/11/17 Javascript
如何清除IE10+ input X 文本框的叉叉和密码输入框的眼睛图标
2016/12/21 Javascript
详解数组Array.sort()排序的方法
2020/05/09 Javascript
Vue-cli proxyTable 解决开发环境的跨域问题详解
2017/05/18 Javascript
JS实现评价的星星功能
2017/08/20 Javascript
AngularJS遍历获取数组元素的方法示例
2017/11/11 Javascript
玩转vue的slot内容分发
2018/09/22 Javascript
js观察者模式的弹幕案例
2020/11/23 Javascript
[01:11:10]2014 DOTA2华西杯精英邀请赛 5 24 iG VS VG加赛
2014/05/26 DOTA
[51:29]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
浅谈python中set使用
2016/06/30 Python
Python实现类似比特币的加密货币区块链的创建与交易实例
2018/03/20 Python
django实现支付宝支付实例讲解
2019/10/17 Python
Django 实现将图片转为Base64,然后使用json传输
2020/03/27 Python
Python flask框架实现浏览器点击自定义跳转页面
2020/06/04 Python
HTML5 文件域+FileReader 分段读取文件并上传到服务器
2017/10/23 HTML / CSS
Room Mate Hotels美国:西班牙酒店品牌
2018/04/10 全球购物
香港草莓网:Strawberrynet香港
2019/05/10 全球购物
为什么要有struct关键字
2012/05/08 面试题
Servlet如何得到客户端机器的信息
2014/10/17 面试题
高二化学教学反思
2014/01/30 职场文书
生态养殖创业计划书
2014/05/06 职场文书
商场消防安全责任书
2014/07/29 职场文书
领导班子民主生活会整改措施(工商局)
2014/09/21 职场文书
标准离婚协议书(2014版)
2014/10/05 职场文书
2015年财务个人工作总结范文
2015/05/22 职场文书
党支部季度考核意见
2015/06/02 职场文书