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 相关文章推荐
js如何取消事件冒泡
Sep 23 Javascript
javascript实现在网页任意处点左键弹出隐藏菜单的方法
May 13 Javascript
跟我学习javascript的隐式强制转换
Nov 16 Javascript
JavaScript知识点总结(十六)之Javascript闭包(Closure)代码详解
May 31 Javascript
简单实现Bootstrap标签页
Aug 09 Javascript
jQuery选择器实例应用
Jan 05 Javascript
jquery对象与DOM对象转化
Feb 08 Javascript
JS路由跳转的简单实现代码
Sep 21 Javascript
360提示[高危]使用存在漏洞的JQuery版本的解决方法
Oct 27 jQuery
浅谈vue中慎用style的scoped属性
Nov 28 Javascript
详解vue的双向绑定原理及实现
May 05 Javascript
python虚拟环境 virtualenv的简单使用
Jan 21 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
博士208HAF收音机实习报告
2021/03/02 无线电
浅析HTTP消息头网页缓存控制以及header常用指令介绍
2013/06/28 PHP
PHP两种快速排序算法实例
2015/02/15 PHP
Laravel Validator 实现两个或多个字段联合索引唯一
2019/05/08 PHP
window.parent与window.openner区别介绍
2012/04/12 Javascript
运算符&amp;&amp;的三个不同层次
2013/04/07 Javascript
js简单的弹出框有关闭按钮
2014/05/05 Javascript
JavaScript组合拼接字符串的效率对比测试
2014/11/06 Javascript
JS实现带有抽屉效果的产品类网站多级导航菜单代码
2015/09/15 Javascript
纯JavaScript代码实现文本比较工具
2016/02/17 Javascript
jQuery文字横向滚动效果的实现代码
2016/05/31 Javascript
利用bootstrapValidator验证UEditor
2016/09/14 Javascript
jQuery 选择符详细介绍及整理
2016/12/02 Javascript
js判断是否是手机页面
2017/03/17 Javascript
微信小程序实现顶部选项卡(swiper)
2020/06/19 Javascript
深入理解react 组件类型及使用场景
2019/03/07 Javascript
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
2019/05/13 jQuery
vue实现移动端省市区选择
2019/09/27 Javascript
JS代码触发事件代码实例
2020/01/02 Javascript
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
2020/06/01 Javascript
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
2020/07/24 Javascript
vue实现前端列表多条件筛选
2020/10/26 Javascript
JavaScript实现切换多张图片
2021/01/27 Javascript
vue3.0封装轮播图组件的步骤
2021/03/04 Vue.js
Python实现二分法算法实例
2015/02/02 Python
详解用python实现简单的遗传算法
2018/01/02 Python
Python面向对象原理与基础语法详解
2020/01/02 Python
澳大利亚实惠时尚女装商店:Katies
2019/06/16 全球购物
高中毕业自我鉴定范文
2013/10/02 职场文书
管理科学大学生求职信
2013/11/13 职场文书
农民入党思想汇报
2014/01/03 职场文书
个人担保书范文
2014/05/20 职场文书
设计师求职信
2014/07/01 职场文书
2015年中秋节主持词
2015/07/30 职场文书
2016年大学生暑假爱心支教活动策划书
2015/11/26 职场文书
校园安全教育心得体会
2016/01/15 职场文书