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 29 Javascript
javascript使用location.search的示例
Nov 05 Javascript
浅谈window对象的scrollBy()方法
Jul 15 Javascript
javascript实现加载xml文件的方法
Nov 24 Javascript
jQuery Mobile 触摸事件实例
Jun 04 Javascript
js实现带缓动动画的导航栏效果
Jan 16 Javascript
vue.js中toast用法及使用toast弹框的实例代码
Aug 27 Javascript
使用validate.js实现表单数据提交前的验证方法
Sep 04 Javascript
浅谈React碰到v-if
Nov 04 Javascript
jquery中为什么能用$操作
Jun 18 jQuery
Vue实现剪贴板复制功能
Dec 31 Javascript
如何利用node转发请求详解
Sep 17 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+AJAX实现无刷新注册(带用户名实时检测)
2006/12/02 PHP
php时区转换转换函数
2014/01/07 PHP
浅析php原型模式
2014/11/25 PHP
PHP的伪随机数与真随机数详解
2015/05/27 PHP
PHP实现判断数组是一维、二维或几维的方法
2017/02/06 PHP
[原创]php正则删除img标签的方法示例
2017/05/27 PHP
js 获取、清空input type=&quot;file&quot;的值(示例代码)
2013/12/24 Javascript
javascript通过元素id和name直接取得元素的方法
2015/04/28 Javascript
全面解析JavaScript的Backbone.js框架中的Router路由
2016/05/05 Javascript
jquery easyui datagrid实现增加,修改,删除方法总结
2016/05/25 Javascript
Javascript实现图片加载从模糊到清晰显示的方法
2016/06/21 Javascript
基于原生JS实现图片裁剪
2016/08/01 Javascript
使用JS批量选中功能实现更改数据库中的status状态值(批量展示)
2016/11/22 Javascript
详解angular element()方法使用
2017/04/08 Javascript
详解AngularJS ui-sref的简单使用
2017/04/24 Javascript
jQuery实现radio第一次点击选中第二次点击取消功能
2017/05/15 jQuery
详谈for循环里面的break和continue语句
2017/07/20 Javascript
基于angular-utils-ui-breadcrumbs使用心得(分享)
2017/11/03 Javascript
vue-cli 如何打包上线的方法示例
2018/05/08 Javascript
JS实现仿微信支付弹窗功能
2018/06/25 Javascript
Vue实现6位数密码效果
2018/08/18 Javascript
详解适配器在JavaScript中的体现
2018/09/28 Javascript
Vue对象赋值视图不更新问题及解决方法
2019/06/03 Javascript
nodejs二进制与Buffer的介绍与使用
2019/07/11 NodeJs
Nodejs实现图片上传、压缩预览、定时删除功能
2019/10/25 NodeJs
在vue中使用eslint,配合vscode的操作
2020/11/09 Javascript
Python排序函数的使用方法详解
2020/12/11 Python
关于html字符串正则判断和匹配的具体使用
2019/12/12 HTML / CSS
澳大利亚当地社区首选的光学商店:1001 Optical
2019/08/24 全球购物
乌克兰在线电子产品商店:MTA
2019/11/14 全球购物
职业生涯规划书的格式
2013/12/29 职场文书
费用会计岗位职责
2014/01/01 职场文书
法务专员岗位职责
2014/01/02 职场文书
同居协议书范本
2014/04/23 职场文书
保护环境建议书100字
2014/05/13 职场文书
交通事故协议书范本
2016/03/19 职场文书