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 相关文章推荐
jQuery插件开发的两种方法及$.fn.extend的详解
Jan 16 Javascript
JavaScript导出Excel实例详解
Nov 25 Javascript
深入了解JavaScript中的Symbol的使用方法
Jul 28 Javascript
微信小程序 input输入框控件详解及实例(多种示例)
Dec 14 Javascript
Javascript设计模式之装饰者模式详解篇
Jan 17 Javascript
完美解决手机浏览器顶部下拉出现网页源或刷新的问题
Nov 30 Javascript
详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计
Aug 31 Javascript
vue权限管理系统的实现代码
Jan 17 Javascript
vue-router实现编程式导航的代码实例
Jan 19 Javascript
vue实现鼠标移入移出事件代码实例
Mar 27 Javascript
JS获取当前时间的年月日时分秒及时间的格式化的方法
Dec 18 Javascript
Vue实现导入Excel功能步骤详解
Jul 03 Vue.js
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
PHP5全版本绕过open_basedir读文件脚本漏洞详细介绍
2015/01/20 PHP
PHP中4种常用的抓取网络数据方法
2015/06/04 PHP
PHP生成唯一订单号
2015/07/05 PHP
php给图片加文字水印
2015/07/31 PHP
php实现微信发红包
2015/12/05 PHP
CodeIgniter集成smarty的方法详解
2016/05/26 PHP
php合并数组并保留键值的实现方法
2018/03/12 PHP
做网页的一些技巧
2007/02/01 Javascript
超级酷和最实用的jQuery实例收集(20个)
2010/04/21 Javascript
10个基于jQuery或JavaScript的WYSIWYG 编辑器整理
2010/05/06 Javascript
js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版
2011/01/08 Javascript
一个JavaScript操作元素定位元素的实例
2014/10/29 Javascript
JS构造函数与原型prototype的区别介绍
2016/07/04 Javascript
jQuery表单验证简单示例
2016/10/17 Javascript
微信小程序 MD5加密登录密码详解及实例代码
2017/01/12 Javascript
Angular实现购物车计算示例代码
2017/02/21 Javascript
微信小程序模版渲染详解
2018/01/26 Javascript
Es6 Generator函数详细解析
2018/02/24 Javascript
vue做移动端适配最佳解决方案(亲测有效)
2018/09/04 Javascript
用vite搭建vue3应用的实现方法
2021/02/22 Vue.js
Python计算回文数的方法
2015/03/11 Python
在Python中使用第三方模块的教程
2015/04/27 Python
http请求 request失败自动重新尝试代码示例
2018/01/25 Python
python 获取指定文件夹下所有文件名称并写入列表的实例
2018/04/23 Python
Python通过调用有道翻译api实现翻译功能示例
2018/07/19 Python
对python捕获ctrl+c手工中断程序的两种方法详解
2018/12/26 Python
在Python中居然可以定义两个同名通参数的函数
2019/01/31 Python
如何利用Anaconda配置简单的Python环境
2019/06/24 Python
python+requests实现接口测试的完整步骤
2020/10/27 Python
Django2.1.7 查询数据返回json格式的实现
2020/12/29 Python
IRO美国官网:法国服装品牌
2018/03/06 全球购物
使用索引(Index)有哪些需要考虑的因素
2016/10/19 面试题
十八届三中全会宣传方案
2014/02/21 职场文书
银行行长竞聘演讲稿
2014/04/23 职场文书
工作说明书格式
2014/07/29 职场文书
情侣之间的道歉短信
2015/05/12 职场文书