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 相关文章推荐
jQuery中的pushStack实现原理和应用实例
Feb 03 Javascript
JavaScript设计模式之工厂模式和构造器模式
Feb 11 Javascript
深入理解JS实现快速排序和去重
Oct 17 Javascript
JavaScript动态数量的文件上传控件
Nov 18 Javascript
jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】
Dec 19 Javascript
bootstrap treeview 树形菜单带复选框及级联选择功能
Jun 08 Javascript
详解vue.js下引入百度地图jsApi的两种方法
Jul 27 Javascript
vue指令之表单控件绑定v-model v-model与v-bind结合使用
Apr 17 Javascript
vue如何限制只能输入正负数及小数
Jul 04 Javascript
JS回调函数 callback的理解与使用案例分析
Sep 09 Javascript
微信小程序自定义弹出模态框禁止底部滚动功能
Mar 09 Javascript
基于JavaScript实现简单的轮播图
Mar 03 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 list()函数的详解
2013/06/05 PHP
php文件服务实现虚拟挂载其他目录示例
2014/04/17 PHP
PHP实现批量删除(封装)
2017/04/28 PHP
Javascript Cookie读写删除操作的函数
2010/03/02 Javascript
jquery中动态效果小结
2010/12/16 Javascript
JS去除数组重复值的五种不同方法
2013/09/06 Javascript
js实现全屏漂浮广告移入光标停止移动
2013/12/02 Javascript
js获取会话框prompt的返回值的方法
2015/01/10 Javascript
AngularJs根据访问的页面动态加载Controller的解决方案
2015/02/04 Javascript
比例尺、缩略图、平移缩放之百度地图添加控件方法
2015/08/03 Javascript
jQuery操作Table技巧大汇总
2016/01/23 Javascript
JS实现简单的二维矩阵乘积运算
2016/01/26 Javascript
jQuery插件Validation快速完成表单验证的方式
2016/07/28 Javascript
详解自动生成博客目录案例
2016/12/09 Javascript
Bootstrap 模态框实例插件案例分析
2016/12/28 Javascript
详解vue路由篇(动态路由、路由嵌套)
2019/01/27 Javascript
深入学习JavaScript 高阶函数
2019/06/11 Javascript
解决VueCil代理本地proxytable无效报错404的问题
2020/11/07 Javascript
jquery自定义组件实例详解
2020/12/31 jQuery
[54:29]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第二场
2018/04/09 DOTA
python基础教程之缩进介绍
2014/08/29 Python
python生成IP段的方法
2015/07/07 Python
Python卸载模块的方法汇总
2016/06/07 Python
tensorflow实现KNN识别MNIST
2018/03/12 Python
Linux下python与C++使用dlib实现人脸检测
2018/06/29 Python
使用HTML5的Canvas绘制曲线的简单方法
2015/09/08 HTML / CSS
如何找出EMP表里面SALARY第N高的employee
2013/12/05 面试题
自我鉴定范文200字
2013/10/02 职场文书
护士实习生自我鉴定范文
2013/12/10 职场文书
幼儿园元旦亲子活动方案
2014/02/17 职场文书
2014年物业公司工作总结
2014/11/22 职场文书
紫日观后感
2015/06/05 职场文书
高中开学感言
2015/08/01 职场文书
学习经验交流会策划书
2015/11/02 职场文书
用Python的绘图库(matplotlib)绘制小波能量谱
2021/04/17 Python
Python中zipfile压缩包模块的使用
2021/05/14 Python