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 相关文章推荐
php gethostbyname获取域名ip地址函数详解
Jan 24 Javascript
避免回车键导致的页面无意义刷新的解决方法
Apr 12 Javascript
JS中引用百度地图并将百度地图的logo和信息去掉
Sep 29 Javascript
AngularJS入门教程之Hello World!
Dec 06 Javascript
jQuery焦点图轮播插件KinSlideshow用法分析
Jun 08 Javascript
JavaScript提升性能的常用技巧总结【经典】
Jun 20 Javascript
浅谈jQuery中hide和fadeOut的区别 show和fadeIn的区别
Aug 18 Javascript
关于 jQuery Easyui异步加载tree的问题解析
Dec 06 Javascript
JavaScript 值类型和引用类型的初次研究(推荐)
Jul 19 Javascript
vue地区选择组件教程详解
May 04 Javascript
jquery实现手风琴案例
May 04 jQuery
Vue中使用Echarts仪表盘展示实时数据的实现
Nov 01 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
人大复印资料处理程序_补充篇
2006/10/09 PHP
PHP setcookie() cannot modify header information 的解决方法
2009/01/09 PHP
php常用ODBC函数集(详细)
2013/06/24 PHP
PHP创建/删除/复制文件夹、文件
2016/05/03 PHP
一些易混淆且不常用的属性,希望有用
2007/01/29 Javascript
js单例模式详解实例
2013/11/21 Javascript
js的touch事件的实际引用
2014/10/13 Javascript
JQuery判断checkbox是否选中及其它复选框操作方法合集
2015/06/01 Javascript
JS解决iframe之间通信和自适应高度的问题
2016/08/24 Javascript
JavaScript常见的五种数组去重的方式
2016/12/15 Javascript
vue项目关闭eslint校验
2018/03/21 Javascript
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
2018/10/12 Javascript
小程序实现抽奖动画
2020/04/16 Javascript
vue+vuex+json-seiver实现数据展示+分页功能
2019/04/11 Javascript
js 实现碰撞检测的示例
2020/10/28 Javascript
vue.js实现点击图标放大离开时缩小的代码
2021/01/27 Vue.js
[04:19]完美世界携手游戏风云打造 卡尔工作室模型介绍篇
2013/04/24 DOTA
[01:34]传奇从这开始 2016国际邀请赛中国区预选赛震撼开启
2016/06/26 DOTA
Python入门篇之文件
2014/10/20 Python
python读取word文档的方法
2015/05/09 Python
深入浅析python继承问题
2016/05/29 Python
浅谈python 四种数值类型(int,long,float,complex)
2016/06/08 Python
Python实战之制作天气查询软件
2019/05/14 Python
Python人工智能之路 之PyAudio 实现录音 自动化交互实现问答
2019/08/13 Python
django重新生成数据库中的某张表方法
2019/08/28 Python
PyCharm最新激活码PyCharm2020.2.3有效
2020/11/18 Python
python urllib和urllib3知识点总结
2021/02/08 Python
浪漫婚礼主持词
2014/03/14 职场文书
《赶海》教学反思
2014/04/20 职场文书
学生意外伤害赔偿协议书
2014/09/17 职场文书
2014年祖国生日寄语
2014/09/19 职场文书
2015年世界无烟日演讲稿
2015/03/18 职场文书
辩护意见书
2015/06/04 职场文书
FP-growth算法发现频繁项集——发现频繁项集
2021/06/24 Python
Jpa Specification如何实现and和or同时使用查询
2021/11/23 Java/Android
win11无线投屏在哪设置? win11无线投屏功能的使用方法
2022/04/08 数码科技