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的递增/递减运算符和带操作的赋值运算符的等价式
Dec 08 Javascript
script标签属性type与language使用选择
Dec 02 Javascript
iframe 上下滚动条如何默认在下方实现原理
Dec 10 Javascript
jquery及原生js获取select下拉框选中的值示例
Oct 25 Javascript
jquery实现顶部向右伸缩的导航区域代码
Sep 02 Javascript
有关jQuery中parent()和siblings()的小问题
Jun 01 Javascript
BootStrap Table对前台页面表格的支持实例讲解
Dec 22 Javascript
js实现拖拽上传图片功能
Aug 01 Javascript
JavaScript定义及输出螺旋矩阵的方法详解
Dec 01 Javascript
关于微信小程序登录的那些事
Jan 08 Javascript
VsCode与Node.js知识点详解
Sep 05 Javascript
微信小程序封装多张图片上传api代码实例
Dec 30 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
海贼王动画变成“真人”后,凯多神还原,雷利太帅了!
2020/04/09 日漫
php中mysql连接和基本操作代码(快速测试使用,简单方便)
2014/04/25 PHP
本地计算机无法启动Apache故障处理
2014/08/08 PHP
thinkphp使用literal防止模板标签被解析的方法
2014/11/22 PHP
php获取字符串中各个字符出现次数的方法
2015/02/23 PHP
php静态成员方法和静态的成员属性的使用方法
2017/10/26 PHP
javascript网页关闭时提醒效果脚本
2008/10/22 Javascript
JavaScript 三种不同位置代码的写法
2009/10/25 Javascript
JS判断当前日期是否大于某个日期的实现代码
2012/09/02 Javascript
jquery删除指定的html标签并保留标签内文本内容的方法
2014/04/02 Javascript
Nodejs实现的一个简单udp广播服务器、客户端
2014/09/25 NodeJs
基于jQuery插件实现环形图标菜单旋转切换特效
2015/05/15 Javascript
原生JS和JQuery动态添加、删除表格行的方法
2015/05/28 Javascript
JavaScript动态插入CSS的方法
2015/12/10 Javascript
jQuery动态添加及删除表单上传元素的方法(附demo源码下载)
2016/01/15 Javascript
jQuery 插件封装的方法
2016/11/16 Javascript
js实现密码强度检验
2017/01/15 Javascript
详解vue事件对象、冒泡、阻止默认行为
2017/03/20 Javascript
JavaScript使用readAsDataUrl方法预览图片
2017/05/10 Javascript
Vue实现web分页组件详解
2017/11/28 Javascript
mock.js实现模拟生成假数据功能示例
2019/01/15 Javascript
详解jenkins自动化部署vue
2019/05/14 Javascript
Python3网络爬虫开发实战之极验滑动验证码的识别
2019/08/02 Python
CSS3中HSL和HSLA的简单使用示例
2015/07/14 HTML / CSS
HTML5 和小程序实现拍照图片旋转、压缩和上传功能
2018/10/08 HTML / CSS
html通过canvas转成base64的方法
2019/07/18 HTML / CSS
HTML5添加禁止缩放功能
2017/11/03 HTML / CSS
环保标语口号
2014/06/13 职场文书
八一建军节演讲稿
2014/09/10 职场文书
授权委托书(法人单位用)
2014/09/29 职场文书
2014年药品销售工作总结
2014/12/16 职场文书
员工工作表现自我评价
2015/03/06 职场文书
升职自荐书
2019/05/09 职场文书
2019旅游导游工作总结
2019/06/27 职场文书
Ajax实现局部刷新的方法实例
2021/03/31 Javascript
Python爬虫实战之爬取携程评论
2021/06/02 Python