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 相关文章推荐
为数据添加append,remove功能
Oct 03 Javascript
JS事件Event元素(兼容IE,Firefox,Chorme)
Nov 01 Javascript
JSCode all of Brower 全局屏蔽网页右键功能 具体实现
Jun 05 Javascript
什么是 AngularJS?AngularJS简介
Dec 06 Javascript
JavaScript实现仿淘宝商品购买数量的增减效果
Jan 22 Javascript
详解JavaScript for循环中发送AJAX请求问题
Jun 23 Javascript
BootStrap表单控件之复选框checkbox和单选择按钮radio
May 23 Javascript
详解webpack性能优化——DLL
Oct 20 Javascript
js 索引下标之li集合绑定点击事件
Jan 12 Javascript
layui实现二维码弹窗、并下载到本地的方法
Sep 25 Javascript
微信小程序 轮播图实现原理及优化详解
Sep 29 Javascript
vue+elementUI组件table实现前端分页功能
Nov 15 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
利用static实现表格的颜色隔行显示
2006/10/09 PHP
global.php
2006/12/09 PHP
php操作MongoDB类实例
2015/06/17 PHP
[原创]PHP正则删除html代码中a标签并保留标签内容的方法
2017/05/23 PHP
PDO::setAttribute讲解
2019/01/29 PHP
Jquery实现显示和隐藏的4种简单方式
2013/08/28 Javascript
jquery实现表单验证并阻止非法提交
2015/07/09 Javascript
js运动应用实例解析
2015/12/28 Javascript
图解prototype、proto和constructor的三角关系
2016/07/31 Javascript
javascript 四十条常用技巧大全
2016/09/09 Javascript
JavaScript实现Java中Map容器的方法
2016/10/09 Javascript
Nodejs进阶:如何将图片转成datauri嵌入到网页中去实例
2016/11/21 NodeJs
jQuery弹出div层过2秒自动消失
2016/11/29 Javascript
BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
2017/01/03 Javascript
vue组件Prop传递数据的实现示例
2017/08/17 Javascript
EasyUI创建人员树的实例代码
2017/09/15 Javascript
小程序图片长按识别功能的实现方法
2018/08/30 Javascript
Vue实现远程获取路由与页面刷新导致404错误的解决
2019/01/31 Javascript
Vue3为什么这么快
2020/09/23 Javascript
python实现dict版图遍历示例
2014/02/19 Python
Python中getpass模块无回显输入源码解析
2018/01/11 Python
使用python将大量数据导出到Excel中的小技巧分享
2018/06/14 Python
在PyCharm中三步完成PyPy解释器的配置的方法
2018/10/29 Python
Python 实现取矩阵的部分列,保存为一个新的矩阵方法
2018/11/14 Python
Python+OpenCV采集本地摄像头的视频
2019/04/25 Python
python多线程下信号处理程序示例
2019/05/31 Python
python3 使用traceback定位异常实例
2020/03/09 Python
Python脚本实现Zabbix多行日志监控过程解析
2020/08/26 Python
python反爬虫方法的优缺点分析
2020/11/25 Python
JD Sports西班牙:英国领先的运动服装公司
2020/01/06 全球购物
bonprix荷兰网上商店:便宜的服装、鞋子和家居用品
2020/07/04 全球购物
我有一个char * 型指针正巧指向一些int 型变量, 我想跳过它们。 为什么如下的代码((int *)p)++; 不行?
2013/05/09 面试题
求职信范文大全
2014/05/26 职场文书
乡镇创先争优活动总结
2014/08/28 职场文书
学生上课看漫画的检讨书
2014/09/26 职场文书
go结构体嵌套的切片数组操作
2021/04/28 Golang