用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 相关文章推荐
JavaScript字符串对象fromCharCode方法入门实例(用于把Unicode值转换为字符串)
Oct 17 Javascript
浅谈javascript中replace()方法
Nov 10 Javascript
javascript+HTML5 Canvas绘制转盘抽奖
May 16 Javascript
浅谈几种常用的JS类定义方法
Jun 08 Javascript
如何制作幻灯片(代码分享)
Jan 06 Javascript
JS中Safari浏览器中的Date
Jul 17 Javascript
JavaScript实现随机数生成器(去重)
Oct 13 Javascript
Vue-router路由判断页面未登录跳转到登录页面的实例
Oct 26 Javascript
JS控制鼠标拒绝点击某一按钮的实例
Dec 29 Javascript
函数式编程入门实践(一)
Apr 20 Javascript
JavaScript Tab菜单实现过程解析
May 13 Javascript
js实现右键弹出自定义菜单
Sep 08 Javascript
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
Ajax+PHP快速上手及简单应用说明
2013/07/24 PHP
Codeigniter操作数据库表的优化写法总结
2014/06/12 PHP
Yii视图CGridView列表用法实例分析
2016/07/12 PHP
PHP单态模式简单用法示例
2016/11/16 PHP
laravel5.2实现区分前后台用户登录的方法
2017/01/11 PHP
用YUI做了个标签浏览效果
2007/02/20 Javascript
学习ExtJS Window常用方法
2009/10/07 Javascript
JQuery Tips(4) 一些关于提高JQuery性能的Tips
2009/12/19 Javascript
jquery中get和post的简单实例
2014/02/04 Javascript
js(JavaScript)实现TAB标签切换效果的简单实例
2014/02/26 Javascript
解决Jquery向页面append新元素之后事件的绑定问题
2015/03/16 Javascript
JavaScript中innerHTML,innerText,outerHTML的用法及区别
2015/09/01 Javascript
jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结
2015/12/24 Javascript
基于Bootstrap重置输入框内容按钮插件
2016/05/12 Javascript
jQuery插件之validation插件
2017/03/29 jQuery
详解webpack+vue-cli项目打包技巧
2017/06/17 Javascript
原生js实现移动端触摸轮播的示例代码
2017/12/22 Javascript
js数组去重的方法总结
2019/01/18 Javascript
vue keep-alive 动态删除组件缓存的例子
2019/11/04 Javascript
vant自定义二级菜单操作
2020/11/02 Javascript
[31:33]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS DT 第一场
2014/05/23 DOTA
Python线程中对join方法的运用的教程
2015/04/09 Python
python爬取m3u8连接的视频
2018/02/28 Python
Python Dataframe 指定多列去重、求差集的方法
2018/07/10 Python
Python 普通最小二乘法(OLS)进行多项式拟合的方法
2018/12/29 Python
Python第三方库h5py_读取mat文件并显示值的方法
2019/02/08 Python
python执行scp命令拷贝文件及文件夹到远程主机的目录方法
2019/07/08 Python
django将数组传递给前台模板的方法
2019/08/06 Python
基于keras 模型、结构、权重保存的实现
2020/01/24 Python
python实现打砖块游戏
2020/02/25 Python
Python restful框架接口开发实现
2020/04/13 Python
阿迪达斯荷兰官方网站:adidas荷兰
2018/03/16 全球购物
俄罗斯三星品牌商店:GalaxyStore
2020/11/04 全球购物
公安学专业求职信
2014/07/27 职场文书
2014党的群众路线教育实践活动总结报告
2014/10/31 职场文书
Java线程的6种状态与生命周期
2022/05/11 Java/Android