给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 相关文章推荐
javascript实现面向对象类的功能书写技巧
Mar 07 Javascript
Javascript 异步加载详解(浏览器在javascript的加载方式)
May 20 Javascript
window.location不跳转的问题解决方法
Apr 17 Javascript
理解javascript回调函数
Dec 28 Javascript
javascript自动切换焦点控制效果完整实例
Feb 02 Javascript
JS组件Bootstrap实现图片轮播效果
May 16 Javascript
bootstrap导航、选项卡实现代码
Dec 28 Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
Mar 06 Javascript
create-react-app 修改为多入口编译的方法
Aug 01 Javascript
Vue Autocomplete 自动完成功能简单示例
May 25 Javascript
js 根据对象数组中的属性进行排序实现代码
Sep 12 Javascript
Javascript异步执行不按顺序解决方案
Apr 30 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
PHP5/ZendEngine2的改进
2006/10/09 PHP
PHP的面试题集,附我的答案和分析(一)
2006/11/19 PHP
PHP 创建标签云函数代码
2010/05/26 PHP
PHP 遍历文件实现代码
2011/05/04 PHP
解析MySql与Java的时间类型
2013/06/22 PHP
jquery中ajax调用json数据的使用说明
2011/03/17 Javascript
js 幻灯片的实现
2011/12/06 Javascript
javascript制作的简单注册模块表单验证
2015/04/13 Javascript
js+html5操作sqlite数据库的方法
2016/02/02 Javascript
Vue.js父与子组件之间传参示例
2017/02/28 Javascript
Angular2 父子组件数据通信实例
2017/06/22 Javascript
微信小程序实现手势图案锁屏功能
2018/01/30 Javascript
Node配合WebSocket做多文件下载以及进度回传
2019/11/07 Javascript
Element Collapse 折叠面板的使用方法
2020/07/26 Javascript
[02:33]2014DOTA2 TI每日综述 LGD涉险晋级DK闯入胜者组
2014/07/14 DOTA
Python中的面向对象编程详解(下)
2015/04/13 Python
python实现判断数组是否包含指定元素的方法
2015/07/15 Python
Python的地形三维可视化Matplotlib和gdal使用实例
2017/12/09 Python
Python使用MD5加密算法对字符串进行加密操作示例
2018/03/30 Python
Python从list类型、range()序列简单认识类(class)【可迭代】
2019/05/31 Python
利用python-pypcap抓取带VLAN标签的数据包方法
2019/07/23 Python
python爬虫 正则表达式解析
2019/09/28 Python
利用python对mysql表做全局模糊搜索并分页实例
2020/07/12 Python
关于Python字符编码与二进制不得不说的一些事
2020/10/04 Python
pip 20.3 新版本发布!即将抛弃 Python 2.x(推荐)
2020/12/16 Python
html5摇一摇代码优化包括DeviceMotionEvent等等
2014/09/01 HTML / CSS
HTML5中的进度条progress元素简介及兼容性处理
2016/06/02 HTML / CSS
Harman Audio官方商店:购买JBL、Harman Kardon、Infinity和AKG
2019/12/05 全球购物
文秘专业大学生求职信
2013/11/10 职场文书
顶岗实习接收函
2014/01/09 职场文书
2015年房地产个人工作总结
2015/05/26 职场文书
使用springboot暴露oracle数据接口的问题
2021/05/07 Oracle
Golang 实现获取当前函数名称和文件行号等操作
2021/05/08 Golang
Python自动化测试PO模型封装过程详解
2021/06/22 Python
python实现简易自习室座位预约系统
2021/06/30 Python
python中Pyqt5使用Qlabel标签播放视频
2022/04/22 Python