jQuery修改CSS伪元素属性
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");
by iefreer
jQuery修改CSS伪元素属性相关推荐
- 如何修改css伪元素的样式
首先说一下变成思想,众所周知,css伪元素是不可以修改的,首先你查找他的元素就很困难,不知道怎么查找的可以看一下我的另一篇原生js查看css伪元素属性,那么我们应该怎么修改呢 . 其实换一种思维事情就 ...
- js来控制、修改CSS伪元素的方法
例如,我的样式表有以下规则,需要把伪元素的content内容进行修改 <style>p:after{content:'after伪元素'} </style> <p id= ...
- 【JQ】jQuery改变css伪元素样式
伪元素是什么?例如 :bofore.:after 伪元素不是dom,不能直接操作. 若有以下html和css,通过操作伪元素改变图标颜色: <div class = "table-co ...
- 如何使用jquery修改css中带有!important的样式属性
<div class="test">使用jquery修改css中带有!important的样式属性</div> 外部样式为: div.test{width: ...
- css 商城 两列_如何使用css伪元素实现超实用的图标库(附源码)
今天我们来复盘一下前端中css伪元素的知识以及如何用css伪元素来减轻javascript的压力,做出一些脑洞大开的图形. 预备知识 伪元素 伪元素是一个附加至选择器末的关键词,允许你对被选择元素的特 ...
- 用CSS伪元素制作箭头
现在让我们开始制作箭头吧! 在开始前,你要知道如何用CSS去画一个三角形,如果还不清楚可以看看这里纯CSS画各种图形 我们用到两个CSS伪元素,before和after,它们属于行内元素,但可以用di ...
- jQuery修改!important的css样式jQuery修改css未生效
当我们使用jQuery修改带有!important的css样式或者jQuerycss样式未生效可尝试以下解决办法 1.解决办法 原有代码: <!DOCTYPE html> <html ...
- html中伪元素怎么更改图片,如何改变css伪元素的样式
本篇文章介绍了如何改变css伪元素样式的方法,希望对学习前端css的朋友有帮助! 一.CSS伪元素 CSS 伪元素用于向某些选择器设置特殊效果. 伪元素的用法如下:selector:pseudo-el ...
- [JS 分析] 汽_车_之_家 JS 生成 CSS 伪元素 hs_kw44_configUS::before
0.参考 https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-elements https://developer.mozilla.org/ ...
最新文章
- 三星叫停公司分拆重组计划:否认李在镕行贿
- QT5 QT4--LNK2019 无法解析的外部符号
- Visual Studio Styles
- 我这么讲线索二叉树,我三岁大的表弟笑了笑
- 我的世界连锁挖矿下载JAVA_我的世界1.7.10连锁挖矿整合包
- 微信小程序时间戳的转换及调用
- 孙宏斌,真的押上了全部身家?
- Mp4v2实现h264+aac打包成Mp4视频文件
- Lesson 002 —— 网络七层模型
- JS中的拖动之—— ondragstart,ondrag,ondragend , ondragenter , ondragover , ondragleave, ondrop 的区别...
- 组合数的各种性质和定理
- [DDC]Deep Domain Confusion: Maximizing for Domain Invariance
- win10系统电池图标不见了怎么恢复
- 2012服务器更改temp位置,如何更改windows的temp目录位置
- zoj 1005 Jugs BFS
- 主动学习(Active learning)简介
- android 5.0 pie,Android各版本份额占比出炉:Android Pie仍未知
- 基于nonebot2+go-cqhttp的QQ机器人构建(1)机器人搭建
- IOS开发 阅读器类APP可用开源框架介绍(2)
- 白嫖 IObit 系列软件例如 IObit Uninstaller