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 相关文章推荐
用JS实现的一个include函数
Jul 21 Javascript
javascript 三种编解码方式
Feb 01 Javascript
jquery插件如何使用 jQuery操作Cookie插件使用介绍
Dec 15 Javascript
js Select下拉列表框进行多选、移除、交换内容的具体实现方法
Aug 13 Javascript
Extjs实现进度条的两种便捷方式
Sep 26 Javascript
使用百度地图api实现根据地址查询经纬度
Dec 11 Javascript
浅谈angularJS 作用域
Jul 05 Javascript
JS基于cookie实现来宾统计记录访客信息的方法
Aug 04 Javascript
IE9+已经不对document.createElement向下兼容的解决方法
Sep 14 Javascript
深入理解jQuery.data() 的实现方式
Nov 30 Javascript
vue-router 起步步骤详解
Mar 26 Javascript
JavaScript实现简单的计算器
Jan 16 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
农民和部队如何穿矿
2020/03/04 星际争霸
PHP Session_Regenerate_ID函数双释放内存破坏漏洞
2011/01/27 PHP
php 获取页面中指定内容的实现类
2014/01/23 PHP
laravel框架使用FormRequest进行表单验证,验证异常返回JSON操作示例
2020/02/18 PHP
一实用的实现table排序的Javascript类库
2007/09/12 Javascript
奇妙的js
2007/09/24 Javascript
javawscript 三级菜单的实现原理
2009/07/01 Javascript
jQuery AJAX回调函数this指向问题
2010/02/08 Javascript
JQuery 1.6发布 性能提升,同时包含大量破坏性变更
2011/05/10 Javascript
js中string转int把String类型转化成int类型
2014/08/13 Javascript
javascript文本框内输入文字倒计数的方法
2015/02/24 Javascript
jQuery使用append在html元素后同时添加多项内容的方法
2015/03/26 Javascript
jQuery实现仿Alipay支付宝首页全屏焦点图切换特效
2015/05/04 Javascript
基于jquery编写的放大镜插件
2016/03/23 Javascript
vue动态添加路由addRoutes之不能将动态路由存入缓存的解决
2019/02/19 Javascript
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
2019/03/19 jQuery
如何基于JS截获动态代码
2019/12/25 Javascript
JavaScript面试中常考的字符串操作方法大全(包含ES6)
2020/05/10 Javascript
[39:00]Optic vs VP 2018国际邀请赛淘汰赛BO3 第三场 8.24
2018/08/25 DOTA
总结Python中逻辑运算符的使用
2015/05/13 Python
Python队列的定义与使用方法示例
2017/06/24 Python
详解Python3序列赋值、序列解包
2019/05/14 Python
Python3 字典dictionary入门基础附实例
2020/02/10 Python
详解python tkinter 图片插入问题
2020/09/03 Python
Python使用xpath实现图片爬取
2020/09/16 Python
收集的7个CSS3代码生成工具
2010/04/17 HTML / CSS
口头翻译求职人自荐信
2013/12/07 职场文书
会议邀请函范文
2014/01/09 职场文书
《美丽的南沙群岛》教学反思
2014/04/27 职场文书
公务员政审单位鉴定材料
2014/05/16 职场文书
小学亲子活动总结
2014/07/01 职场文书
交通事故委托书范本(2篇)
2014/09/21 职场文书
大学推普周活动总结
2015/05/07 职场文书
军事博物馆观后感
2015/06/05 职场文书
北京大学中文系教授推荐的10本小说
2019/08/08 职场文书
Redis Lua脚本实现ip限流示例
2022/07/15 Redis