用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');
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
JavaScript中如何校验一个URL？最近遇到几次需要校验URL的,所以本文给大家整理一下几个校验URL的方法,文中有详细的代码讲解和图文参考,具有一定的参考价值,需要的朋友可以参考下2023-12-12
这篇文章主要为大家详细介绍了js调用刷新界面的几种方式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
马上圣诞节了，作为一名程序猿，如何体现自己独特的过节风格，如何在朋友圈发一张专属自己的祝福照片我觉得很有必要，你们说是不是2015-12-12
找了半天找到的解决办法，看介绍说是javascript的闭包问题，导致得不能直接读取外部的那个函数，不然就所有传递的参数都变为最后一个了。2009-12-12
本文章通过实例代码给大家详细介绍js中正则表达式的全局匹配模式 /g的用法，需要的朋友参考下2017-04-04
数字格式化是开发中经常遇到的任务,特别是在需要为数字添加千分位符或控制小数位数时,以下是几种常用的数字格式化方法,每种方法有其优缺点,适用于不同的需求场景,感兴趣的小伙伴跟着小编一起来看看吧2024-12-12
这篇文章主要给大家介绍了关于一次Webpack配置文件的分离实战记录，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-11-11
这篇文章主要介绍了js形成页面的一种遮罩效果实例代码，有需要的朋友可以参考一下2014-01-01
下面小编就为大家带来一篇完美解决IE不支持Data.parse()的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起 小编过来看看吧2016-11-11
浏览器兼容的JS写法总结，涵盖的内容很全面，感兴趣的小伙伴们可以参考一下2016-04-04
最新评论