给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 相关文章推荐
XP折叠菜单&amp;仿QQ2006菜单
Dec 16 Javascript
jquery 插件学习(四)
Aug 06 Javascript
js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
Jan 27 Javascript
javascript数字时钟示例分享
Apr 23 Javascript
jQuery+css3实现Ajax点击后动态删除功能的方法
Aug 10 Javascript
使用堆实现Top K算法(JS实现)
Dec 25 Javascript
基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)
Feb 22 Javascript
微信小程序 配置文件详细介绍
Dec 14 Javascript
AngularJS中ng-class用法实例分析
Jul 06 Javascript
浅谈Node 调试工具入门教程
Mar 20 Javascript
微信小程序利用for循环解决内容变更问题
Mar 05 Javascript
Taro UI框架开发小程序实现左滑喜欢右滑不喜欢效果的示例代码
May 18 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产生随机字符串函数
2006/12/06 PHP
php 字符转义 注意事项
2009/05/27 PHP
PHP 简单数组排序实现代码
2009/08/05 PHP
php删除文件夹及其文件夹下所有文件的函数代码
2013/01/23 PHP
php实现RSA加密类实例
2015/03/26 PHP
thinkphp3.x自定义Action、Model及View的简单实现方法
2016/05/19 PHP
PHP搭建大文件切割分块上传功能示例
2017/01/04 PHP
PHPTree――php快速生成无限级分类
2018/03/30 PHP
$()JS小技巧
2007/07/21 Javascript
用jQuery简化JavaScript开发分析
2009/02/19 Javascript
IE与FireFox中的childNodes区别
2011/10/20 Javascript
JavaScript中“基本类型”之争小结
2013/01/03 Javascript
YUI Compressor压缩JavaScript原理及微优化
2013/01/07 Javascript
jquery实现点击弹出层效果的简单实例
2014/03/03 Javascript
Jquery实现鼠标移动放大图片功能实例
2015/03/25 Javascript
jquery实现右键菜单插件
2015/03/29 Javascript
js实现刷新iframe的方法汇总
2015/04/27 Javascript
javascript实现简单计算器效果【推荐】
2016/04/19 Javascript
jQuery插件dataTables添加序号列的方法
2016/07/06 Javascript
详解百度百科目录导航树小插件
2017/01/08 Javascript
vue 父组件调用子组件方法及事件
2018/03/29 Javascript
vue 配置多页面应用的示例代码
2018/10/22 Javascript
微信小程序自定义tabBar组件开发详解
2020/09/24 Javascript
JS变量提升及函数提升实例解析
2020/09/03 Javascript
Nest.js散列与加密实例详解
2021/02/24 Javascript
Python迭代和迭代器详解
2016/11/10 Python
Python编程修改MP3文件名称的方法
2017/04/19 Python
Python模块的定义,模块的导入,__name__用法实例分析
2020/01/07 Python
Tensorflow获取张量Tensor的具体维数实例
2020/01/19 Python
Django REST framwork的权限验证实例
2020/04/02 Python
Python用摘要算法生成token及检验token的示例代码
2020/12/01 Python
英国设计的甲板鞋和船鞋:Chatham
2018/12/06 全球购物
中学生学习生活的自我评价
2013/10/26 职场文书
三分钟演讲稿事例
2014/03/03 职场文书
挂靠协议书范本
2014/04/22 职场文书
单位委托书范本(3篇)
2014/09/18 职场文书