用js实现before和after伪类的样式修改的示例代码
2017-09-07 17:16
906 查看
本文介绍了使用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');
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- 通过js修改css伪类after,before等样式
- 借Vue-iview样式修改,熟悉:before和:after伪类的用法
- 微信小程序 JS动态修改样式的实现代码
- js 设置与修改url参数的实现代码
- JS实现随机数生成算法示例代码
- JS实现图片翻书效果示例代码
- JS 实现图片直接下载示例代码
- JS判断不同分辨率调用不同的CSS样式文件实现思路及测试代码
- js实现点小图看大图效果的思路及示例代码
- js实现幻灯片播放图片示例代码
- JS实现图片翻书效果示例代码
- js实现幻灯片播放图片示例代码
- 实现表单对齐样式的一段示例代码
- JS实现一键回顶功能示例代码
- html css js 实现Tab标签页示例代码
- JS 实现Table相同行的单元格自动合并示例代码
- js 设置选中行的样式的实现代码
- 在Javascript(js)或Jquery中直接实现超链接跳转代码示例!
- 非html5实现js版弹球游戏示例代码
- JS 修改URL参数(实现代码)