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 相关文章推荐
jquery scrollTop方法根据滚动像素显示隐藏顶部导航条
May 27 Javascript
Javascript实现重力弹跳拖拽运动效果示例
Jun 28 Javascript
Javascript:为input设置readOnly属性(示例讲解)
Dec 25 Javascript
鼠标左键单击冲突的问题解决方法(防止冒泡)
May 14 Javascript
JS的数组迭代方法
Feb 05 Javascript
JS针对浏览器窗口关闭事件的监听方法集锦
Jun 24 Javascript
js中通过getElementsByName访问name集合对象的方法
Oct 31 Javascript
微信小程序之picker日期和时间选择器
Feb 09 Javascript
jQuery事件详解
Feb 23 Javascript
Bootstrap Table列宽拖动的方法
Aug 15 Javascript
微信小程序 可搜索的地址选择实现详解
Aug 28 Javascript
JavaScript创建、读取和删除cookie
Sep 03 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数组常用函数实例小结
2018/08/20 PHP
Javascript 面向对象 继承
2010/05/13 Javascript
javascript新建标签,判断键盘输入,以及判断焦点(示例代码)
2013/11/25 Javascript
javascript间隔定时器(延时定时器)学习 间隔调用和延时调用
2014/01/13 Javascript
javascript的函数作用域
2014/11/12 Javascript
node.js中的querystring.unescape方法使用说明
2014/12/10 Javascript
JavaScript的ExtJS框架中表格的编写教程
2016/05/21 Javascript
求js数组的最大值和最小值的四种方法
2017/03/03 Javascript
JQuery EasyUI的一些常用组件
2017/07/12 jQuery
Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法
2017/10/24 Javascript
NodeJS 中Stream 的基本使用
2018/07/30 NodeJs
JavaScript对象拷贝与赋值操作实例分析
2018/12/10 Javascript
vue-cli3环境变量与分环境打包的方法示例
2019/02/18 Javascript
详解vue中axios请求的封装
2019/04/08 Javascript
WebGL学习教程之Three.js学习笔记(第一篇)
2019/04/25 Javascript
微信小程序项目总结之记账小程序功能的实现(包括后端)
2019/08/20 Javascript
IDEA安装vue插件图文详解
2019/09/26 Javascript
使用JS location实现搜索框历史记录功能
2019/12/23 Javascript
基于elementUI竖向表格、和并列的案例
2020/10/26 Javascript
Python插件virtualenv搭建虚拟环境
2017/11/20 Python
详解从Django Rest Framework响应中删除空字段
2019/01/11 Python
PyQT实现菜单中的复制,全选和清空的功能的方法
2019/06/17 Python
python3+PyQt5 数据库编程--增删改实例
2019/06/17 Python
全面了解django的缓存机制及使用方法
2019/07/22 Python
Keras模型转成tensorflow的.pb操作
2020/07/06 Python
详解Python之Scrapy爬虫教程NBA球员数据存放到Mysql数据库
2021/01/24 Python
python openpyxl模块的使用详解
2021/02/25 Python
浅析HTML5中的 History 模式
2017/06/22 HTML / CSS
斯德哥尔摩通票:Stockholm Pass
2018/01/09 全球购物
医科学校毕业生自荐信
2013/11/09 职场文书
优秀研究生自我鉴定
2013/12/04 职场文书
主办会计岗位职责
2014/03/13 职场文书
省级优秀毕业生主要事迹
2014/05/29 职场文书
市场推广策划方案
2014/06/02 职场文书
专家推荐信范文
2015/03/26 职场文书
MySQL入门命令之函数-单行函数-流程控制函数
2021/04/05 MySQL