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常见问题整理(持续更新)
Aug 06 Javascript
Javascript让DEDECMS告别手写Tag
Sep 01 Javascript
Jquery弹出层插件ThickBox的使用方法
Dec 09 Javascript
莱鸟介绍javascript onclick事件
Jan 06 Javascript
JS实现登录页面记住密码和enter键登录方法推荐
May 10 Javascript
数据结构中的各种排序方法小结(JS实现)
Jul 23 Javascript
jQuery过滤选择器用法示例
Sep 12 Javascript
JavaScript函数节流的两种写法
Apr 07 Javascript
Angular移动端页面input无法输入的解决方法
Nov 14 Javascript
Angular使用过滤器uppercase/lowercase实现字母大小写转换功能示例
Mar 27 Javascript
JS typeof fn === 'function' &amp;&amp; fn()详解
Aug 22 Javascript
抖音短视频(douyin)去水印工具的实现代码
Mar 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/03/04 星际争霸
WINDOWS 2000下使用ISAPI方式安装PHP
2006/09/05 PHP
PHP模板引擎SMARTY
2006/10/09 PHP
解析php中array_merge与array+array的区别
2013/06/21 PHP
PHP常用函数和常见疑难问题解答
2014/03/05 PHP
Thinkphp的volist标签嵌套循环使用教程
2014/07/08 PHP
php出现内存位置访问无效错误问题解决方法
2014/08/16 PHP
ThinkPHP模板Volist标签嵌套循环输出多维数组的方法
2016/03/23 PHP
利用PHP访问带有密码的Redis方法示例
2017/02/09 PHP
js判断undefined变量类型使用typeof
2013/06/03 Javascript
jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码
2013/06/04 Javascript
目前流行的JavaScript库的介绍及对比
2013/09/29 Javascript
在jquery中的ajax方法怎样通过JSONP进行远程调用
2014/04/04 Javascript
jquery分析文本里url或邮件地址为真实链接的方法
2015/06/20 Javascript
jQuery在线选座位插件seat-charts特效代码分享
2015/08/27 Javascript
深入理解React中何时使用箭头函数
2017/08/23 Javascript
详解js动态获取浏览器或页面等容器的宽高
2019/03/13 Javascript
jquery实现垂直无限轮播的方法分析
2019/07/16 jQuery
d3.js 地铁轨道交通项目实战
2019/11/27 Javascript
Vue实现图书管理案例
2021/01/20 Vue.js
原生JavaScript实现换肤
2021/02/19 Javascript
彻底搞懂Python字符编码
2018/01/23 Python
python逐行读写txt文件的实例讲解
2018/04/03 Python
pyqt5 comboBox获得下标、文本和事件选中函数的方法
2019/06/14 Python
python opencv 检测移动物体并截图保存实例
2020/03/10 Python
html5 分层屏幕适配的方法
2018/03/16 HTML / CSS
Timberland俄罗斯官方网上商店:全球领先的户外品牌
2020/03/15 全球购物
比较基础的php面试题及答案-编程题
2012/10/14 面试题
学术会议邀请函范文
2014/01/22 职场文书
幼儿园教师培训方案
2014/02/04 职场文书
火车来了教学反思
2014/02/11 职场文书
统招统分证明
2015/06/23 职场文书
军事理论课感想
2015/08/11 职场文书
七年级写作指导之游记作文
2019/10/07 职场文书
神州牡丹园的导游词
2019/11/20 职场文书
Vue3中toRef与toRefs的区别
2022/03/24 Vue.js