jQuery修改CSS伪元素属性的方法
更新时间：2014年07月30日 14:51:29 投稿：whsnow
CSS伪元素不是DOM元素，因此你无法直接选择到它们。下面与大家分享两种不错的修改方法，需要的朋友可以参考下
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");
相关文章
昨天写了篇通过jQuery源码学习javascript（一），里面有一个定义对象C的方法，我早期也没有太注意这个方面的技术细节。后来我查了一下资料，发现里面有很多巧的地方。今天与大家分享2012-12-12
jquery 操作DOM案例，实现图片的显示，需要的朋友可以参考下2012-04-04
jQuery EasyUI API 中文文档 - EasyLoader 加载器
jQuery EasyUI API 中文文档 - EasyLoader 加载器，使用jQuery EasyUI的朋友可以参考下。2011-09-09
昨日在一个前端网站上看见了一个老外写的纯用css3做的仿Path菜单，心里痒痒，于是也用jQuery写了一个，现在分享给大家2011-12-12
这篇文章主要介绍了JQuery中Text方法用法,实例分析了Text方法设置文本内容的使用方法,非常简单实用,需要的朋友可以参考下2015-05-05
jQuery中select与datalist制作下拉菜单时的区别浅析
一般我们通常使用select制作下拉菜单，但是H5之后，datalist也可以充当select的角色，而且两者还有一点小的不同。具体区别详解小编通过本文给简单介绍下2016-12-12
这篇文章主要介绍了jQuery实现的省市联动菜单功能,结合完整实例形式分析了jQuery实现级联菜单的具体流程与操作方法,涉及jQuery表单及数组元素的遍历及事件响应处理技巧.非常简单实用,需要的朋友可以参考下2017-01-01
这篇文章主要为大家详细介绍了jquery Banner轮播选项卡效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
这篇文章主要介绍了jquery ajax双击div直接修改div中内容的相关方法，感兴趣的小伙伴们可以参考一下2016-03-03
这篇文章主要介绍了jQuery实现简易商城系统项目实操，文章围绕主题展开详细的内容介绍，具有一定的参考价值，感兴趣的小伙伴可以参考一下2022-06-06
最新评论