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 相关文章推荐
iframe 父窗口和子窗口相互的调用方法集锦
Dec 15 Javascript
JS长整型精度问题实例分析
Jan 13 Javascript
使用AngularJS编写较为优美的JavaScript代码指南
Jun 19 Javascript
5个最顶级jQuery图表类库插件【jquery插件库】
May 05 Javascript
JS实现的幻灯片切换显示效果
Sep 07 Javascript
bootstrap datetimepicker2.3.11时间插件使用
Nov 19 Javascript
JavaScript获取中英文混合字符串长度的方法示例
Feb 04 Javascript
javascript 产生随机数的几种方法总结
Sep 26 Javascript
vue中的适配px2rem示例代码
Nov 19 Javascript
express express-session的使用小结
Dec 12 Javascript
JavaScript中关于base64的一些事
May 06 Javascript
Vue-cli打包后如何本地查看的操作
Sep 02 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环境配置 php5 MySQL5 apache2 phpmyadmin安装与配置图文教程
2007/03/16 PHP
实用的PHP带公钥加密类分享(每次加密结果都不一样哦)
2014/08/20 PHP
php实现xml与json之间的相互转换功能实例
2016/07/07 PHP
IE8 浏览器Cookie的处理
2009/01/31 Javascript
javascript 函数速查表
2010/02/07 Javascript
分享十五个最佳jQuery 幻灯插件和教程
2010/03/27 Javascript
JavaScript 原型与继承说明
2010/06/09 Javascript
js中settimeout方法加参数
2014/02/28 Javascript
jQuery判断复选框是否勾选的原理及示例
2014/05/21 Javascript
JavaScript检测浏览器cookie是否已经启动的方法
2015/02/27 Javascript
JavaScript使用cookie实现记住账号密码功能
2015/04/27 Javascript
原生js获取元素样式的简单方法
2016/08/06 Javascript
js面向对象实现canvas制作彩虹球喷枪效果
2016/09/24 Javascript
JavaScript用200行代码制作打飞机小游戏实例
2017/06/21 Javascript
html中通过JS获取JSON数据并加载的方法
2017/11/30 Javascript
使用Vue开发一个实时性时间转换指令
2018/01/17 Javascript
在 React、Vue项目中使用SVG的方法
2018/02/09 Javascript
JS实现的字符串数组去重功能小结
2019/06/17 Javascript
基于Node.js的大文件分片上传示例
2019/06/19 Javascript
vue 防止页面加载时看到花括号的解决操作
2020/11/09 Javascript
python实现的一个p2p文件传输实例
2014/06/04 Python
使用FastCGI部署Python的Django应用的教程
2015/07/22 Python
Nginx搭建HTTPS服务器和强制使用HTTPS访问的方法
2015/08/16 Python
用python编写第一个IDA插件的实例
2018/05/29 Python
详解django+django-celery+celery的整合实战
2019/03/19 Python
Python使用POP3和SMTP协议收发邮件的示例代码
2019/04/16 Python
html5 touch事件实现触屏页面上下滑动(一)
2016/03/10 HTML / CSS
高清屏下canvas重置尺寸引发的问题的解决
2019/10/14 HTML / CSS
澳大利亚最大的网上油画销售画廊:Direct Art Australia
2018/04/15 全球购物
小学教师自我鉴定范文
2014/03/20 职场文书
事业单位鉴定材料
2014/05/25 职场文书
送温暖献爱心活动总结
2014/07/08 职场文书
竞选班干部演讲稿400字
2014/08/20 职场文书
房屋授权委托书范本
2014/10/07 职场文书
学生保证书格式
2015/02/27 职场文书
Spring Boot 排除某个类加载注入IOC的操作
2021/08/02 Java/Android