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 相关文章推荐
JavaScript实现Sleep函数的代码
Mar 04 Javascript
给事件响应函数传参数的四种方式小结
Dec 05 Javascript
基于JavaScript创建动态Dom
Dec 08 Javascript
js点击文本框弹出可选择的checkbox复选框
Feb 03 Javascript
JS图片放大效果简单实现代码
Sep 08 Javascript
详解springmvc 接收json对象的两种方式
Dec 06 Javascript
Jquery EasyUI $.Parser
Jun 02 jQuery
vue 中自定义指令改变data中的值
Jun 02 Javascript
Bootstrap popover 实现鼠标移入移除显示隐藏功能方法
Jan 24 Javascript
在vue项目中优雅的使用SVG的方法实例详解
Dec 03 Javascript
利用node 判断打开的是文件 还是 文件夹的实例
Jun 10 Javascript
详解vite2.0配置学习(typescript版本)
Feb 25 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定时自动生成静态HTML的实现代码
2010/06/20 PHP
win10下 php安装seaslog扩展的详细步骤
2020/12/04 PHP
动态修改DOM 里面的 id 属性的弊端分析
2008/09/03 Javascript
JS 显示当前日期与时间的代码
2010/03/24 Javascript
jquery删除指定的html标签并保留标签内文本内容的方法
2014/04/02 Javascript
jQuery页面刷新(局部、全部)问题分析
2016/01/09 Javascript
JavaScript下的时间格式处理函数Date.prototype.format
2016/01/27 Javascript
javascript cookie基础应用之记录用户名的方法
2016/09/20 Javascript
原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)
2016/10/29 Javascript
简单实现jquery焦点图
2016/12/12 Javascript
微信小程序分页加载的实例代码
2017/07/11 Javascript
tween.js缓动补间动画算法示例
2018/02/13 Javascript
基于vue中css预加载使用sass的配置方式详解
2018/03/13 Javascript
详解Angular6学习笔记之主从组件
2018/09/05 Javascript
详解微信小程序中组件通讯
2018/10/30 Javascript
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
2019/01/09 jQuery
详解Vue 全局变量,局部变量
2019/04/17 Javascript
webpack中如何加载静态文件的方法步骤
2019/05/18 Javascript
JavaScript算法学习之冒泡排序和选择排序
2019/11/02 Javascript
如何在vue中使用百度地图添加自定义覆盖物(水波纹)
2020/11/03 Javascript
python利用拉链法实现字典方法示例
2017/03/25 Python
python实现全盘扫描搜索功能的方法
2019/02/14 Python
Python绘图Matplotlib之坐标轴及刻度总结
2019/06/28 Python
windows下python虚拟环境virtualenv安装和使用详解
2019/07/16 Python
python实现PID算法及测试的例子
2019/08/08 Python
python实现的读取网页并分词功能示例
2019/10/29 Python
基于python的itchat库实现微信聊天机器人(推荐)
2019/10/29 Python
医学院毕业生自荐信
2013/11/08 职场文书
产品发布会策划方案
2014/05/12 职场文书
中学清明节活动总结
2014/07/04 职场文书
2014年学习厉行节约反对浪费思想汇报
2014/09/10 职场文书
民用住房租房协议书
2014/10/29 职场文书
2014年语文教学工作总结
2014/12/17 职场文书
学生会生活部工作总结2015
2015/03/31 职场文书
毕业生求职自荐信(2016最新版)
2016/01/28 职场文书
《所见》教学反思
2016/02/23 职场文书