用js实现before和after伪类的样式修改的示例代码


Posted in Javascript onSeptember 07, 2017

本文介绍了使用javascript,jQuery实现修改before,after伪类的样式,分享给大家,具体如下:

最近遇到一个需要改变:before,:after 伪类的样式,发现css中并不能直接选择某一个元素的:before和:after伪类元素,所以特总结了使用javascript和jQuery改变元素的:before和:after伪类样式的方法。

类如如下的html及样式

<p class="red">Hello,are you kain?</p>

css样式

.red:before {
  content: 'red',
  background-color : red
}

1.使用javascript或者jQuery切换,增加元素的类

.green:before {
  content: 'green';
  background-color: green;
}

$('p').addClass('green');

2.在存在的style文档中动态插入样式

document.styleSheet[0].addRule('.red:before','background-color:green');
document.styleSheet[0].insertRule('.red:before{background-color:green}',0);

3.创建一份新的样式表,并使用JavaScript或jQuert将其插入到中

var style = document.creatElement('style');
document.head.appendChild(style);
sheet = style.sheet;
sheet.addRule('.red:before','background-color:green');
sheet.insertRule('.red:before{background-color:green}',0);

// jQuery
$('<style>.red:before{background-color:green}</style>').appendTo('head');

4.使用HTML5的data-属性,在属性中使用attr()动态修改。

在p标签中增加data-attr="red"属性,然后

$('red').attr('data-attr','green');

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
利用Dojo和JSON建立无限级AJAX动态加载的功能模块树
Mar 24 Javascript
jquery中加载图片自适应大小主要实现代码
Aug 23 Javascript
JS获取select的value和text值的简单实例
Feb 26 Javascript
js返回上一页并刷新的多种实现方法
Feb 26 Javascript
js在IE与firefox的差异集锦
Nov 11 Javascript
JavaScript创建闭包的两种方式的优劣与区别分析
Jun 22 Javascript
基于jQuery实现的双11天猫拆红包抽奖效果
Dec 01 Javascript
Javascript中常见的逻辑题和解决方法
Sep 17 Javascript
JS实现仿饿了么在浏览器标签页失去焦点时网页Title改变
Jun 01 Javascript
利用Jasmine对Angular进行单元测试的方法详解
Jun 12 Javascript
详解vue页面首次加载缓慢原因及解决方案
Nov 06 Javascript
jQuery实现简单全选框
Sep 13 jQuery
vue使用drag与drop实现拖拽的示例代码
Sep 07 #Javascript
SelectPage v2.4 发布新增纯下拉列表和关闭分页功能
Sep 07 #Javascript
JS禁止浏览器右键查看元素或按F12审查元素自动关闭页面示例代码
Sep 07 #Javascript
阿里大于短信验证码node koa2的实现代码(最新)
Sep 07 #Javascript
bootstrap-table组合表头的实现方法
Sep 07 #Javascript
react-native-tab-navigator组件的基本使用示例代码
Sep 07 #Javascript
基于Bootstrap table组件实现多层表头的实例代码
Sep 07 #Javascript
You might like
UTF8编码内的繁简转换的PHP类
2009/07/09 PHP
php学习之数据类型之间的转换介绍
2011/06/09 PHP
用php解析html的实现代码
2011/08/08 PHP
php实现zip文件解压操作
2015/11/03 PHP
php获取客户端IP及URL的方法示例
2017/02/03 PHP
Laravel框架用户登陆身份验证实现方法详解
2017/09/14 PHP
利用javascript移动div层-javascript 拖动层
2009/03/22 Javascript
javascript 有用的脚本函数
2009/05/07 Javascript
返回上一页并自动刷新的JavaScript代码
2014/02/19 Javascript
JS嵌套函数调用上下文的问题解决
2014/03/26 Javascript
jQuery定义插件的方法
2015/12/18 Javascript
分享jQuery插件的学习笔记
2016/01/14 Javascript
javascript数字验证的实例代码(推荐)
2016/08/20 Javascript
Vue.js中数组变动的检测详解
2016/10/12 Javascript
jQuery实现滚动到底部时自动加载更多的方法示例
2018/02/18 jQuery
基于JavaScript canvas绘制贝塞尔曲线
2018/12/25 Javascript
vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)
2019/04/12 Javascript
JavaScript剩余操作符Rest Operator详解
2019/07/20 Javascript
JavaScript canvas实现文字时钟
2021/01/10 Javascript
python 多进程通信模块的简单实现
2014/02/20 Python
python使用内存zipfile对象在内存中打包文件示例
2014/04/30 Python
用ReactJS和Python的Flask框架编写留言板的代码示例
2015/12/19 Python
python魔法方法-属性访问控制详解
2016/07/25 Python
Python编程之列表操作实例详解【创建、使用、更新、删除】
2017/07/22 Python
pandas表连接 索引上的合并方法
2018/06/08 Python
python内存动态分配过程详解
2019/07/15 Python
python编写猜数字小游戏
2019/10/06 Python
python 将列表里的字典元素合并为一个字典实例
2020/09/01 Python
python 获取谷歌浏览器保存的密码
2021/01/06 Python
老干部工作先进集体事迹材料
2014/05/21 职场文书
八年级上册语文教学计划
2015/01/22 职场文书
公文写作:工伤事故分析报告怎么写?
2019/11/05 职场文书
详解Java实现数据结构之并查集
2021/06/23 Java/Android
vue项目支付功能代码详解
2022/02/18 Vue.js
关于CSS自定义属性与前端页面的主题切换问题
2022/03/21 HTML / CSS
德劲DE1107指针试高灵敏度全波段收音机机评
2022/04/05 无线电