用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 相关文章推荐
JavaScript 自动完成脚本整理(33个)
Oct 20 Javascript
jQuery 表格工具集
Apr 25 Javascript
jQuery中setTimeout的几种使用方法小结
Apr 07 Javascript
jQuery制作可自定义大小的拼图游戏
Mar 30 Javascript
Bootstrap缩略图的创建方法
Mar 22 Javascript
Jquery获取radio选中的值
May 05 jQuery
关于vue v-for循环解决img标签的src动态绑定问题
Sep 18 Javascript
AngularJS实现的自定义过滤器简单示例
Feb 02 Javascript
Vue中axios拦截器如何单独配置token
Dec 27 Javascript
微信小程序实现发微博功能的示例代码
Jun 24 Javascript
谈谈JavaScript令人迷惑的==与+
Aug 31 Javascript
JS如何操作DOM基于表格动态展示数据
Oct 15 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
Google Voice 短信发送接口PHP开源版(2010.5更新)
2010/07/22 PHP
php park、unpark、ord 函数使用方法(二进制流接口应用实例)
2010/10/19 PHP
关于Sphinx创建全文检索的索引介绍
2013/06/25 PHP
php检查是否是ajax请求的方法
2015/04/16 PHP
PHP扩展程序实现守护进程
2015/04/16 PHP
基于ThinkPHP实现的日历功能实例详解
2017/04/15 PHP
利用php操作memcache缓存的基础方法示例
2017/08/02 PHP
PHP二维数组实现去除重复项的方法【保留各个键值】
2017/12/21 PHP
php实现快速对二维数组某一列进行组装的方法小结
2019/12/04 PHP
javaScript checkbox 全选/反选及批量删除
2010/04/28 Javascript
img onload事件绑定各浏览器均可执行
2012/12/19 Javascript
ANT 压缩(去掉空格/注释)JS文件可提高js运行速度
2013/04/15 Javascript
js动态给table添加/删除tr的方法
2013/08/02 Javascript
JavaScript Date对象详解
2016/03/01 Javascript
JQuery解析XML的方法小结
2016/04/02 Javascript
JS 对象(Object)和字符串(String)互转方法
2016/05/20 Javascript
javascript实现标签切换代码示例
2016/05/22 Javascript
AngularJS中$injector、$rootScope和$scope的概念和关联关系深入分析
2017/01/19 Javascript
微信小程序实战之顶部导航栏(选项卡)(1)
2020/06/19 Javascript
React Native使用fetch实现图片上传的示例代码
2018/03/07 Javascript
详解vue-cli项目中怎么使用mock数据
2018/05/29 Javascript
说说如何在Vue.js中实现数字输入组件的方法
2019/01/08 Javascript
vue中v-show和v-if的异同及v-show用法
2019/06/06 Javascript
element-ui tooltip修改背景颜色和箭头颜色的实现
2019/12/16 Javascript
Vue中使用Lodop插件实现打印功能的简单方法
2019/12/19 Javascript
[15:39]教你分分钟做大人:龙骑士
2014/10/30 DOTA
python调用百度REST API实现语音识别
2018/08/30 Python
python中的数组赋值与拷贝的区别详解
2019/11/26 Python
Python 如何创建一个简单的REST接口
2020/07/30 Python
PyCharm 2020.2 安装详细教程
2020/09/25 Python
莫斯科大型旅游休闲商品超市:Camping.ru
2020/09/16 全球购物
do you have any Best Practice for testing
2016/06/04 面试题
企业演讲稿范文大全
2014/05/20 职场文书
鼋头渚导游词
2015/02/05 职场文书
关于应聘教师的自荐信
2016/01/28 职场文书
python脚本框架webpy模板赋值实现
2021/11/20 Python