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中关于ScrollableGridPlugin.js（固定表头）插件的使用逐步解析
以前写前台的时候需要用哪些效果从来都是有现成的东西拿来就用的，因为自己真的是有些懒，毫无探索精神，只重视结果，不追求过程2014-07-07
这篇文章主要介绍了jQuery AJAX timeout 超时问题详解的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-06-06
jQuery除了包含原生JS中的内置数据类型(built-in datatype)，还包括一些扩展的数据类型(virtual types)，如Selectors、Events等，通过本文给大家分享14个jquery数据类型，感兴趣的朋友一起学习吧2016-01-01
这篇文章主要为大家介绍了Jquery中巧用Ajax的beforeSend方法，beforeSend方法用于在向服务器发送请求前添加一些处理函数,需要的朋友可以参考下2016-01-01
这篇文章主要为大家详细介绍了jquery 实现列表上移、下移功能的相关资料，感兴趣的小伙伴们可以参考一下2016-02-02
animate弹出后，调用out函数消失。2010-05-05
轻松学习jQuery插件EasyUI，本文的重点在于EasyUI表单验证，并告诉大家如何提交表单，感兴趣的小伙伴们可以参考一下2015-12-12
:nth-child(index)子元素过滤选择器的描述是：选取每个父元素下的弟index个子元素，index从1开始。2011-07-07
这篇文章主要为大家详细介绍了jQuery实现表单验证功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
本篇文章主要是对文本框水印提示效果的简单实现代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-02-02
最新评论