JavaScript实现修改伪类样式


Posted in Javascript onNovember 27, 2017

项目中时常会需要用到使用JavaScript来动态控制为元素(:before,:after)的样式,但是我们都知道JavaScript或jQuery并没有伪类选择器。这里总结一下几种常见的方法。

HTML

<p class="red">Hi, this is a plain-old, sad-looking paragraph tag.</p>

CSS

.red::before {
content: 'red';
color: red;
}

 

方法一

使用JavaScript或者jQuery切换<p>元素的类名,修改样式。

.green::before {
content: 'green';
color: green;
}
$('p').removeClass('red').addClass('green');

 

 

方法二

在已存在的<style>中动态插入新样式。

document.styleSheets[0].addRule('.red::before','color: green');
document.styleSheets[0].insertRule('.red::before { color: green }', 0);

 

方法三

创建一份新的样式表,并使用JavaScript或jQuery将其插入到<head>中

// Create a new style tag
var style = document.createElement("style");

// Append the style tag to head
document.head.appendChild(style);

// Grab the stylesheet object
sheet = style.sheet

// Use addRule or insertRule to inject styles
sheet.addRule('.red::before','color: green');
sheet.insertRule('.red::before { color: green }', 0);

 

jQuery

$('<style>.red::before{color:green}</style>').appendTo('head');

 

方法四

使用HTML5的data-属性,在属性中使用attr()动态修改。

<p class="red" data-attr="red">Hi, this is plain-old, sad-looking paragraph tag.</p>
.red::before {
content: attr(data-attr);
color: red;
}
$('.red').attr('data-attr', 'green');

以上就是我们为大家整理的四种方法,如果大家有更好的方法,可以在下方的留言区讨论。

Javascript 相关文章推荐
JavaScript进阶教程(第四课第一部分)
Apr 05 Javascript
ie focus bug 解决方法
Sep 03 Javascript
angularjs项目的页面跳转如何实现(5种方法)
May 25 Javascript
自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结
Aug 18 Javascript
vue2实现数据请求显示loading图
Nov 28 Javascript
JS代码实现电脑配置检测功能
Mar 21 Javascript
浅析JS中回调函数及用法
Jul 25 Javascript
vue axios 简单封装以及思考
Oct 09 Javascript
关于React动态加载路由处理的相关问题
Jan 07 Javascript
在小程序中推送模板消息的实现方法
Jul 22 Javascript
Vue中keep-alive 实现后退不刷新并保持滚动位置
Mar 17 Javascript
JavaScript进阶(三)闭包原理与用法详解
May 09 Javascript
Vue.js搭建移动端购物车界面
Jun 28 #Javascript
Vue实现购物车场景下的应用
Nov 27 #Javascript
javascript字体颜色控件的开发 JS实现字体控制
Nov 27 #Javascript
vue购物车插件编写代码
Nov 27 #Javascript
Vue.js devtool插件安装后无法使用的解决办法
Nov 27 #Javascript
微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法
Nov 27 #Javascript
vue2实现可复用的轮播图carousel组件详解
Nov 27 #Javascript
You might like
php json_encode奇怪问题说明
2011/09/27 PHP
隐藏Nginx或Apache以及PHP的版本号的方法
2016/01/03 PHP
mouse_on_title.js
2006/08/25 Javascript
TFDN图片播放器 不错自动播放
2006/10/03 Javascript
Javascript写了一个清除“logo1_.exe”的杀毒工具(可扫描目录)
2007/02/09 Javascript
js 日期转换成中文格式的函数
2009/07/07 Javascript
JavaScript setTimeout和setInterval的使用方法 说明
2010/03/25 Javascript
EasyUI中combobox默认值注意事项
2015/03/01 Javascript
javascript检查浏览器是否已经启用XX功能
2015/07/10 Javascript
贴近用户体验的Jquery日期、时间选择插件
2015/08/19 Javascript
基于JavaScript实现一定时间后去执行一个函数
2015/12/14 Javascript
Bootstrap使用基础教程详解
2016/09/05 Javascript
Easyui Tree获取当前选择节点的所有顶级父节点
2017/02/14 Javascript
vue mintui-Loadmore结合实现下拉刷新和上拉加载示例
2017/10/12 Javascript
AngularJS 表单验证手机号的实例(非必填)
2017/11/12 Javascript
关于vue面试题汇总
2018/03/20 Javascript
vue项目持久化存储数据的实现代码
2018/10/01 Javascript
解决angular双向绑定无效果,ng-model不能正常显示的问题
2018/10/02 Javascript
JavaScript实现的联动菜单特效示例
2019/07/08 Javascript
基于Python函数的作用域规则和闭包(详解)
2017/11/29 Python
Python使用requests发送POST请求实例代码
2018/01/25 Python
TensorFlow搭建神经网络最佳实践
2018/03/09 Python
Python实现的银行系统模拟程序完整案例
2019/04/12 Python
Python实现的插入排序,冒泡排序,快速排序,选择排序算法示例
2019/05/04 Python
pytorch GAN生成对抗网络实例
2020/01/10 Python
Python中os模块功能与用法详解
2020/02/26 Python
python中的时区问题
2021/01/14 Python
苹果香港官方商城:Apple香港
2016/09/14 全球购物
新西兰领先的内衣店:Bendon Lingerie新西兰
2018/07/11 全球购物
质量保证书范本
2014/04/29 职场文书
庆国庆活动总结
2014/08/28 职场文书
未婚证明书模板
2014/10/08 职场文书
生死牛玉儒观后感
2015/06/11 职场文书
Redis中一个String类型引发的惨案
2021/07/25 Redis
Vue3中toRef与toRefs的区别
2022/03/24 Vue.js
PyCharm 配置SSH和SFTP连接远程服务器
2022/05/11 Python