用js实现before和after伪类的样式修改的示例代码
更新时间：2017年09月07日 17:16:29 作者：wksmile
本篇文章主要介绍了用js实现before和after伪类的样式修改的示例代码，具有一定的参考价值，有兴趣的可以了解一下
本文介绍了使用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');
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了uni-app web-view的使用，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-07-07
在讲这个问题之前，先来补充几个知识点，如果对此已经比较了解可以直接跳过2012-05-05
井字棋作为我们在上学时代必玩的一款连珠游戏，承载了很多人的童年记忆。本文我们就用HTML、css、js来实现一款井字棋游戏，感兴趣的可以动手尝试一下2022-04-04
这篇文章主要介绍了javascript 动态创建表格,需要的朋友可以参考下2015-01-01
不知道大家有没有发现在现在的移动页面上，有很多情况需要加载大量的资源。但是移动端的访问速度和pc还是有很大的差距，有些时候需要一些取巧的方式来提升用户体验，而实时显示加载进度就是其中一种。这篇文章就给大家分享了Javascript实现文件实时加载进度的方法。2016-10-10
BootStrap Validator 根据条件在JS中添加或移除校验操作
这篇文章主要介绍了BootStrap Validator 根据条件在JS中添加或移除校验的相关资料,需要的朋友可以参考下2017-10-10
分离与继承的思想实现图片上传后的预览功能：ImageUploadView
本文要介绍的是网页中常见的图片上传后直接在页面生成小图预览的实现思路，考虑到该功能有一定的适用性，于是把相关的逻辑封装成了一个ImageUploadView组件，实际使用效果可查看下一段的git效果图2016-04-04
在阅读一些框架的源码时发现了new static(),和new self(),甚是不解,后来查阅资料,才了解了,所以下面这篇文章主要给大家介绍了关于php类中static与self的使用区别的相关资料,需要的朋友可以参考下2021-06-06
这篇文章主要介绍了详解微信小程序input标签正则初体验，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
这篇文章主要为大家详细介绍了Javascript 6里的4个新语法，感兴趣的小伙伴们可以参考一下2016-08-08
最新评论