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 相关文章推荐
【消息提示组件】,兼容IE6/7&amp;&amp;FF2
Sep 04 Javascript
jquery下onpropertychange事件的绑定方法
Aug 01 Javascript
filters.revealTrans.Transition使用方法小结
Aug 19 Javascript
在每个匹配元素的外部插入新元素的方法
Dec 20 Javascript
js正则表达式中test,exec,match方法的区别说明
Jan 29 Javascript
jQuery多媒体插件jQuery Media Plugin使用详解
Dec 19 Javascript
jQuery中siblings()方法用法实例
Jan 08 Javascript
jQuery实现简单复制json对象和json对象集合操作示例
Jul 09 jQuery
JavaScript页面倒计时功能完整示例
May 15 Javascript
详解webpack引用jquery(第三方模块)的三种办法
Aug 21 jQuery
React冒泡和阻止冒泡的应用详解
Aug 18 Javascript
在JavaScript中查找字符串中最长单词的三种方法(推荐)
Jan 18 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安全开发 添加随机字符串验证,防止伪造跨站请求
2013/02/14 PHP
PHP Session机制简介及用法
2014/08/19 PHP
phpcms配置列表页以及获得文章发布时间
2017/07/04 PHP
javascript真的不难-回顾一下基础知识
2013/01/15 Javascript
面向对象设计模式的核心法则
2013/11/10 Javascript
JS继承用法实例分析
2015/02/05 Javascript
jQuery实现dialog设置focus焦点的方法
2015/06/10 Javascript
深入理解jquery自定义动画animate()
2016/05/24 Javascript
Angularjs中$http以post请求通过消息体传递参数的实现方法
2016/08/05 Javascript
ThinkJS中如何使用MongoDB的CURD操作
2016/12/13 Javascript
js仿微博动态栏功能
2017/02/22 Javascript
Vue.js在数组中插入重复数据的实现代码
2017/11/17 Javascript
使用 Node.js 开发资讯爬虫流程
2018/01/07 Javascript
vue和webpack安装命令详解
2018/06/15 Javascript
小程序websocket心跳库(websocket-heartbeat-miniprogram)
2020/02/23 Javascript
浅谈JavaScript窗体Window.ShowModalDialog使用
2020/07/22 Javascript
Python实现视频下载功能
2017/03/14 Python
基于DataFrame改变列类型的方法
2018/07/25 Python
记录Python脚本的运行日志的方法
2019/06/05 Python
Python Opencv提取图片中某种颜色组成的图形的方法
2019/09/19 Python
django列表筛选功能的实现代码
2020/03/27 Python
CSS3 实用技巧:实现黑白图像效果示例代码
2013/07/11 HTML / CSS
HTML5 表单验证失败的提示语问题
2017/07/13 HTML / CSS
Bluebella美国官网:英国性感内衣品牌
2018/10/04 全球购物
List、Map、Set三个接口,存取元素时,各有什么特点?
2015/09/27 面试题
应届生船舶驾驶求职信
2013/10/19 职场文书
班组长安全职责
2014/01/05 职场文书
幼儿园大班新学期寄语
2014/01/18 职场文书
大学生就业求职信
2014/06/12 职场文书
2014年党员教师自我剖析材料
2014/09/30 职场文书
单位员工收入证明样本
2014/10/09 职场文书
2015年党总支工作总结
2015/05/25 职场文书
幼儿园见习总结
2015/06/23 职场文书
2016拓展训练心得体会范文
2016/01/12 职场文书
护士年终工作总结不会写?各科护士模板总结
2020/01/02 职场文书
详解Vue的sync修饰符
2021/05/15 Vue.js