文章目录
[隐藏]
jQuery修改CSS伪元素属性的方法
更新时间：2014年07月30日 14:51:29 投稿：whsnow 
我要评论
CSS伪元素不是DOM元素，因此你无法直接选择到它们。下面与大家分享两种不错的修改方法，需要的朋友可以参考下
.
.
.
CSS伪元素（pseudo elements）不是DOM元素，因此你无法直接选择到它们。
假设有如下HTML代码：
|
1
|
<
div
class
=
"techbrood"
id
=
"td_pseudo"
>techbrood introduction</
div
>
|
和CSS代码：
|
1
2
3
|
.techbrood:before {
width
:
0
;
}
|
现在你想在某个元素的click事件中动态的把techbrood:before的width属性设置为100%，
有两个方法，一个是添加新的样式：
|
1
|
$(
'head'
).append(
"<style>.techbrood::before{ width:100% }</style>"
);
|
（注意该方法将影响所有的class为techbrood的元素）
另外一个方法是为该元素添加新类，并通过设置新类的属性来达到改变伪元素属性的效果：
|
1
2
3
|
.techbrood.change:before{
width
:
100%
;
}
|
jQuery代码：
|
1
|
$(
'#td_pseudo'
).addClass(
"change"
);
|
您可能感兴趣的文章:
.
.
微信公众号搜索 “ 脚本之家 ” ，选择关注
程序猿的那些事、送书等活动等着你
.
.
.
相关文章
- .
.
-
这篇文章主要介绍了jQuery实现仿腾讯视频列表分页效果的方法,涉及jquery页面元素的运算与动态调用技巧,非常具有实用价值,需要的朋友可以参考下2015-08-08
-
有bug..点到后面的图片后,再返回 ….. 问题出现了…2008-01-01
-
$.fn是指jquery的命名空间，加上fn上的方法及属性，会对jquery实例每一个有效，下面简单为大家介绍下jquery $.fn $.fx到底是怎么一回事2013-11-11
-
下面小编就为大家带来一篇jquery实现input框获取焦点的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-01-01
-
jQuery插件HighCharts绘制2D柱状图、折线图的组合双轴图效果示例
这篇文章主要介绍了jQuery插件HighCharts绘制2D柱状图、折线图的组合双轴图效果,结合实例形式分析了jQuery使用HighCharts插件同时绘制柱状图、折线图的组合双轴图实现步骤与相关操作技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下2017-03-03
-
这篇文章主要介绍了JQuery each()嵌套使用，非常适合初学者,需要的朋友可以参考下2014-04-04
-
一直在寻找最快捷方便的信息验证方法，之前自己编过JS版验证但要写很多辅助代码，经过许多次改进，还是觉得太麻烦代码还多，维护起太费尽。2010-12-12
-
这篇文章主要介绍了jquery简单实现外部链接用新窗口打开的方法,涉及jQuery正则匹配http://开头外部链接网址的相关技巧,需要的朋友可以参考下2015-05-05
-
这篇文章主要介绍了jQuery获取页面元素绝对与相对位置的方法,涉及jQuery中offset、position等方法的使用技巧,需要的朋友可以参考下2015-06-06
-
本文通过jquery技术实现鼠标指针位置和键盘ASCII码，非常具有参考借鉴价值，感兴趣的朋友一起学习吧2016-03-03
.
扫一扫
1066
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
