用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 相关文章推荐
拖拉表格的JS函数
Nov 20 Javascript
浅谈JavaScript for循环 闭包
Jun 22 Javascript
Vue.js快速入门实例教程
Oct 15 Javascript
bootstrap daterangepicker汉化以及扩展功能
Jun 15 Javascript
vue升级之路之vue-router的使用教程
Aug 14 Javascript
基于vue-router 多级路由redirect 重定向的问题
Sep 03 Javascript
vue 实现边输入边搜索功能的实例讲解
Sep 16 Javascript
JS函数内部属性之arguments和this实例解析
Oct 07 Javascript
vue.js实现简单购物车功能
May 30 Javascript
jQuery实现电梯导航模块
Dec 22 jQuery
Axios取消重复请求的方法实例详解
Jun 15 Javascript
JavaScript阻止事件冒泡的方法
Dec 06 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使用指定字符列表生成随机字符串的方法
2015/04/18 PHP
PHP判断上传文件类型的解决办法
2015/10/20 PHP
PHP实现在数据库百万条数据中随机获取20条记录的方法
2017/04/19 PHP
PNGHandler-借助JS让PNG图在IE下实现透明(包括背景图)
2007/08/31 Javascript
利用js对象弹出一个层
2008/03/26 Javascript
利用js获取服务器时间的两个简单方法
2010/01/08 Javascript
Javascript 入门基础学习
2010/03/10 Javascript
用jquery实现等比例缩放图片效果插件
2010/07/24 Javascript
Jquery 切换不同图片示例代码
2013/12/05 Javascript
JavaScript中输出标签的方法
2014/08/27 Javascript
jQuery动画特效实例教程
2014/08/29 Javascript
javascript 闭包详解
2015/02/15 Javascript
jQuery对象和DOM对象之间相互转换的方法介绍
2015/02/28 Javascript
jQuery实现页面滚动时动态加载内容的方法
2015/03/20 Javascript
图解JavaScript中的this关键字
2020/05/28 Javascript
jQuery实现的表头固定效果实例【附完整demo源码下载】
2016/08/01 Javascript
利用jquery给指定的table动态添加一行、删除一行的方法
2016/10/12 Javascript
JS div匀速移动动画与变速移动动画代码实例
2019/03/26 Javascript
vuex Module将 store 分割成模块的操作
2020/12/07 Vue.js
nodejs中的异步编程知识点详解
2021/01/17 NodeJs
Python使用django获取用户IP地址的方法
2015/05/11 Python
Python自动化测试Eclipse+Pydev 搭建开发环境
2016/08/15 Python
用Python将动态GIF图片倒放播放的方法
2016/11/02 Python
Python的语言类型(详解)
2017/06/24 Python
python中requests库session对象的妙用详解
2017/10/30 Python
在python中pandas的series合并方法
2018/11/12 Python
python opencv判断图像是否为空的实例
2019/01/26 Python
Python本地及虚拟解释器配置过程解析
2020/10/13 Python
Html5自定义字体解决方法
2019/10/09 HTML / CSS
环保倡议书400字
2014/05/15 职场文书
就业协议书怎么填
2014/09/15 职场文书
个人收入证明格式
2015/06/24 职场文书
红领巾广播站广播稿
2015/08/19 职场文书
Nginx访问日志及错误日志参数说明
2021/03/31 Servers
CSS font-variation 可变字体的魅力(实例详解)
2022/03/03 HTML / CSS
Oracle 多表查询基本语法实例
2022/04/18 Oracle