给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 相关文章推荐
extjs 学习笔记(二) Ext.Element类
Oct 13 Javascript
jQuery的链式调用浅析
Dec 03 Javascript
angularJS提交表单(form)
Feb 09 Javascript
AngularJS控制器详解及示例代码
Aug 16 Javascript
旺旺在线客服代码 旺旺客服代码生成器
Jan 09 Javascript
详解node.js中的npm和webpack配置方法
Jan 21 Javascript
Angular整合zTree的示例代码
Jan 24 Javascript
关于Angularjs中跨域设置白名单问题
Apr 17 Javascript
React 使用browserHistory项目访问404问题解决
Jun 01 Javascript
深入理解JavaScript 箭头函数
May 30 Javascript
JS精确判断数据类型代码实例
Dec 18 Javascript
Vue双向绑定实现原理与方法详解
May 07 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
消息持续发送的完整例子
2006/10/09 PHP
我用php+mysql写的留言本
2006/10/09 PHP
PHP实现的sqlite数据库连接类
2014/12/12 PHP
php中preg_replace_callback函数简单用法示例
2016/07/21 PHP
Yii框架防止sql注入,xss攻击与csrf攻击的方法
2016/10/18 PHP
获取焦点时,利用js定时器设定时间执行动作
2010/04/02 Javascript
javascript奇异的arguments分析
2010/10/20 Javascript
基于jQuery的图片剪切插件
2011/08/03 Javascript
javascript设计模式之解释器模式详解
2014/06/05 Javascript
js与css实现弹出层覆盖整个页面的方法
2014/12/13 Javascript
node.js中的fs.readlink方法使用说明
2014/12/17 Javascript
浅谈Javascript实现继承的方法
2015/07/06 Javascript
vue-router跳转页面的方法
2017/02/09 Javascript
基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )
2017/03/30 Javascript
详解如何在NodeJS项目中优雅的使用ES6
2017/04/22 NodeJs
vue 界面刷新数据被清除 localStorage的使用详解
2018/09/16 Javascript
微信 jssdk 签名错误invalid signature的解决方法
2019/01/14 Javascript
vue使用高德地图点击下钻上浮效果的实现思路
2019/10/12 Javascript
Python解析nginx日志文件
2015/05/11 Python
Centos Python2 升级到Python3的简单实现
2016/06/21 Python
Python中断言Assertion的一些改进方案
2016/10/27 Python
Python算术运算符实例详解
2017/05/31 Python
解决Ubuntu pip 安装 mysql-python包出错的问题
2018/06/11 Python
python代码 输入数字使其反向输出的方法
2018/12/22 Python
Python 计算任意两向量之间的夹角方法
2019/07/05 Python
基于Tensorflow:CPU性能分析
2020/02/10 Python
Keras load_model 导入错误的解决方式
2020/06/09 Python
找到不普通的东西:Bonanza
2016/10/20 全球购物
在印度上传处方,在线订购药品:Medlife
2019/03/28 全球购物
趣味运动会广播稿
2014/09/13 职场文书
家庭贫困证明范本(经典版)
2014/09/22 职场文书
乡镇防汛工作汇报
2014/10/28 职场文书
酒店优秀员工推荐信
2015/03/24 职场文书
2016优秀班主任个人先进事迹材料
2016/02/26 职场文书
数据库连接池
2021/04/06 MySQL
python工具dtreeviz决策树可视化和模型可解释性
2022/03/03 Python