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 相关文章推荐
Mootools 1.2教程(2) DOM选择器
Sep 14 Javascript
jQuery 改变CSS样式基础代码
Feb 11 Javascript
JavaScript实现N皇后问题算法谜题解答
Dec 29 Javascript
流量统计器如何鉴别C#:WebBrowser中伪造referer
Jan 07 Javascript
jquery获取及设置outerhtml的方法
Mar 09 Javascript
javascript格式化日期时间方法汇总
Jun 19 Javascript
JavaScript实现给定时间相加天数的方法
Jan 25 Javascript
JavaScript实现的可变动态数字键盘控件方式实例代码
Jul 15 Javascript
基于webpack.config.js 参数详解
Mar 20 Javascript
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
Aug 15 Javascript
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装
Oct 21 Javascript
vue cli4下环境变量和模式示例详解
Apr 09 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
收音机的保养
2021/03/01 无线电
解析dedecms空间迁移步骤详解
2013/05/15 PHP
php实现执行某一操作时弹出确认、取消对话框
2013/12/30 PHP
php5.3 goto函数介绍和示例
2014/03/21 PHP
ThinkPHP处理Ajax返回的方法
2014/11/22 PHP
php搜索文件程序分享
2015/10/30 PHP
php防止CC攻击代码 php防止网页频繁刷新
2015/12/21 PHP
PHP单例模式模拟Java Bean实现方法示例
2018/12/07 PHP
Yii使用DbTarget实现日志功能的示例代码
2020/07/21 PHP
javascript在IE下trim函数无法使用的解决方法
2014/09/12 Javascript
Javascript中的call()方法介绍
2015/03/15 Javascript
JS显示表格内指定行html代码的方法
2015/03/31 Javascript
详解Bootstrap四种图片样式
2016/01/04 Javascript
一款简单的jQuery图片标注效果附源码下载
2016/03/22 Javascript
Bootstrap表单组件教程详解
2016/04/26 Javascript
etmvc+jQuery EasyUI+combobox多值操作实现角色授权实例
2016/11/09 Javascript
angular中实现li或者某个元素点击变色的两种方法
2017/07/27 Javascript
浅谈react.js中实现tab吸顶效果的问题
2017/09/06 Javascript
基于vue实现一个神奇的动态按钮效果
2019/05/15 Javascript
微信小程序实现简单文字跑马灯
2020/05/26 Javascript
vue iview实现动态新增和删除
2020/06/17 Javascript
vue.js实现照片放大功能
2020/06/23 Javascript
JavaScript数组排序的六种常见算法总结
2020/08/18 Javascript
微信小程序实现点击页面出现文字
2020/09/21 Javascript
Python获取apk文件URL地址实例
2013/11/01 Python
python pdb调试方法分享
2014/01/21 Python
从零学python系列之新版本导入httplib模块报ImportError解决方案
2014/05/23 Python
Python中Collection的使用小技巧
2014/08/18 Python
python对字典进行排序实例
2014/09/25 Python
python实现微信接口(itchat)详细介绍
2017/10/23 Python
python opencv之SURF算法示例
2018/02/24 Python
Python实现字典(dict)的迭代操作示例
2018/06/05 Python
tensorflow 利用expand_dims和squeeze扩展和压缩tensor维度方式
2020/02/07 Python
JNI的定义
2012/11/25 面试题
机关副主任个人四风问题整改措施
2014/09/26 职场文书
MySQL数据库必备之条件查询语句
2021/10/15 MySQL