jQuery修改CSS伪元素属性的方法


Posted in Javascript onJuly 30, 2014

CSS伪元素(pseudo elements)不是DOM元素,因此你无法直接选择到它们。

假设有如下HTML代码:

<div class="techbrood" id="td_pseudo">techbrood introduction</div>

和CSS代码:

.techbrood:before {
width: 0;
}

现在你想在某个元素的click事件中动态的把techbrood:before的width属性设置为100%,

有两个方法,一个是添加新的样式:

$('head').append("<style>.techbrood::before{ width:100% }</style>");

(注意该方法将影响所有的class为techbrood的元素)

另外一个方法是为该元素添加新类,并通过设置新类的属性来达到改变伪元素属性的效果:

.techbrood.change:before{
width: 100%;
}

jQuery代码:

$('#td_pseudo').addClass("change");
Javascript 相关文章推荐
JS实现匀速运动的代码实例
Nov 29 Javascript
javascript性能优化之DOM交互操作实例分析
Dec 12 Javascript
jQuery中通过ajax调用webservice传递数组参数的问题实例详解
May 20 Javascript
jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法
Nov 16 Javascript
EditPlus中的正则表达式 实战(4)
Dec 15 Javascript
解决循环中setTimeout执行顺序的问题
Jun 20 Javascript
vue 移动端适配方案详解
Nov 15 Javascript
js中arguments对象的深入理解
May 14 Javascript
详解js中的原型,原型对象,原型链
Jul 16 Javascript
Vue中父子组件的值传递与方法传递
Sep 28 Javascript
JavaScript Blob对象原理及用法详解
Oct 14 Javascript
浅谈js数组splice删除某个元素爬坑
Oct 14 Javascript
教你在heroku云平台上部署Node.js应用
Jul 30 #Javascript
浅析Node在构建超媒体API中的作用
Jul 30 #Javascript
JS实现图片无间断滚动代码汇总
Jul 30 #Javascript
使用jquery.upload.js实现异步上传示例代码
Jul 29 #Javascript
js动态添加onclick事件可传参数与不传参数
Jul 29 #Javascript
使用focus方法让光标默认停留在INPUT框
Jul 29 #Javascript
Node.js 服务器端应用开发框架 -- Hapi.js
Jul 29 #Javascript
You might like
几个学习PHP的网址
2006/11/25 PHP
通过缓存数据库结果提高PHP性能的原理介绍
2012/09/05 PHP
PHP中require和include路径问题详解
2014/12/25 PHP
Yii2下session跨域名共存的解决方案
2017/02/04 PHP
关于JavaScript的gzip静态压缩方法
2007/01/05 Javascript
JS类的封装及实现代码
2009/12/02 Javascript
javascript奇异的arguments分析
2010/10/20 Javascript
对Jquery中的ajax再封装,简化操作示例
2014/02/12 Javascript
项目中常用的JS方法整理
2015/01/30 Javascript
jquery京东商城双11焦点图多图广告特效代码分享
2015/09/06 Javascript
JavaScript高级程序设计(第三版)学习笔记1~5章
2016/03/11 Javascript
js基本算法:冒泡排序,二分查找的简单实例
2016/10/08 Javascript
网页瀑布流布局jQuery实现代码
2016/10/21 Javascript
Angular ng-repeat遍历渲染完页面后执行其他操作详细介绍
2016/12/13 Javascript
详解Angular2中Input和Output用法及示例
2017/05/21 Javascript
vue的基本用法与常见指令
2017/08/15 Javascript
基于vue,vue-router, vuex及addRoutes进行权限控制问题
2018/05/02 Javascript
快速了解Node中的Stream流是什么
2019/02/13 Javascript
详解Vue底部导航栏组件
2019/05/02 Javascript
express + jwt + postMan验证实现持久化登录
2019/06/05 Javascript
Vue中点击active并第一个默认选中功能的实现
2020/02/24 Javascript
利用Vue实现简易播放器的完整代码
2020/12/30 Vue.js
[00:32]2018DOTA2亚洲邀请赛出场——LGD
2018/04/04 DOTA
[54:15]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第二场2月1日
2021/03/11 DOTA
python学习手册中的python多态示例代码
2014/01/21 Python
图文讲解选择排序算法的原理及在Python中的实现
2016/05/04 Python
Python django使用多进程连接mysql错误的解决方法
2018/10/08 Python
Python3.5基础之函数的定义与使用实例详解【参数、作用域、递归、重载等】
2019/04/26 Python
Django shell调试models输出的SQL语句方法
2019/08/29 Python
Clarks英国官方网站:全球领军鞋履品牌
2016/11/26 全球购物
钳工实习自我鉴定
2013/09/19 职场文书
大学毕业生最详细的自我评价分享
2013/11/18 职场文书
行政经理的岗位职责
2013/11/23 职场文书
2014年药店工作总结
2014/11/20 职场文书
新郎接新娘保证书
2015/05/08 职场文书
浅谈MySql update会锁定哪些范围的数据
2022/06/25 MySQL