用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 相关文章推荐
ajax上传时参数提交不更新等相关问题
Dec 11 Javascript
jquery文本框中的事件应用以输入邮箱为例
May 06 Javascript
基于jQuery实现的文字按钮表单特效整理
Dec 07 Javascript
JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法
May 28 Javascript
详解Angular.js的$q.defer()服务异步处理
Nov 06 Javascript
webpack 1.x升级过程中的踩坑总结大全
Aug 09 Javascript
jquery实现倒计时小应用
Sep 19 jQuery
jQuery轻量级表单模型验证插件
Oct 15 jQuery
Vue+Element实现表格编辑、删除、以及新增行的最优方法
May 28 Javascript
三分钟教你用Node做一个微信哄女友(基友)神器(面向小白)
Jun 21 Javascript
js实现无缝滚动双图切换效果
Jul 09 Javascript
JS中的变量作用域(console版)
Jul 18 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
PHP 类商品秒杀计时实现代码
2010/05/05 PHP
PHP中json_encode、json_decode与serialize、unserialize的性能测试分析
2010/06/09 PHP
写出高质量的PHP程序
2012/02/04 PHP
Thinkphp将二维数组变为标签适用的一维数组方法总结
2014/10/30 PHP
利用Ext Js生成动态树实例代码
2008/09/08 Javascript
为调试JavaScript添加输出窗口的代码
2010/02/07 Javascript
基于JQuery的简单实现折叠菜单代码
2010/09/15 Javascript
Javascript堆排序算法详解
2014/12/03 Javascript
javascript中clipboardData对象用法详解
2015/05/13 Javascript
Jquery使用val方法读写value值
2015/05/18 Javascript
jquery实现顶部向右伸缩的导航区域代码
2015/09/02 Javascript
JS实现随页面滚动显示/隐藏窗口固定位置元素
2016/02/26 Javascript
JavaScript的Ext JS框架中的GridPanel组件使用指南
2016/05/21 Javascript
利用jquery给指定的table动态添加一行、删除一行的方法
2016/10/12 Javascript
Node.js如何实现注册邮箱激活功能 (常见)
2017/07/23 Javascript
JavaScript继承定义与用法实践分析
2018/05/28 Javascript
微信小程序上传图片实例
2018/05/28 Javascript
vue实现随机验证码功能(完整代码)
2019/12/10 Javascript
Python类属性的延迟计算
2016/10/22 Python
Python 实现取矩阵的部分列,保存为一个新的矩阵方法
2018/11/14 Python
python aiohttp的使用详解
2019/06/20 Python
python递归法实现简易连连看小游戏
2020/03/25 Python
pandas apply多线程实现代码
2020/08/17 Python
HTML5 新事件 小结
2009/07/16 HTML / CSS
联想英国官网:Lenovo英国
2019/07/17 全球购物
编程输出如下图形
2013/11/24 面试题
与C++相比,Java中的数组有什么不同
2014/03/25 面试题
学术会议欢迎词
2014/01/09 职场文书
投资合作协议书范本
2014/04/17 职场文书
治安消防安全责任书
2014/07/23 职场文书
反四风对照检查材料思想汇报
2014/09/16 职场文书
党员四风问题个人对照检查材料
2014/10/26 职场文书
2014年企业党建工作总结
2014/12/18 职场文书
平安建设汇报材料
2014/12/29 职场文书
部门优秀员工推荐信
2015/03/24 职场文书
nginx访问报403错误的几种情况详解
2022/07/23 Servers