jQuery修改CSS伪元素属性的方法
2023-06-13 09:15:40 时间
CSS伪元素(pseudoelements)不是DOM元素,因此你无法直接选择到它们。
假设有如下HTML代码:
<divclass="techbrood"id="td_pseudo">techbroodintroduction</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");
相关文章
- 基于JQuery的一个简单的鼠标跟随提示效果
- jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
- jquery学习之二属性(html()与html(val))
- jQuery前台数据获取实现代码
- 超级有用的13个基于jQuery的内容滚动插件和教程
- 当自定义数据属性为json格式字符串时jQuery的dataapi问题探讨
- jquery获取自定义属性(attr和prop)实例介绍
- jQuery实现随意改变div任意属性的名称和值(部分原生js实现)
- jQuery.attr()和.removeAttr()方法操作元素属性示例
- 通过length属性判断jquery对象是否存在
- jquery日期控件datepicker属性详细解析
- JQuery验证jsp页面属性是否为空(实例代码)
- jQuery获得内容和属性方法及示例
- jquery批量设置属性readonly和disabled的方法
- jQuery中使用data()方法读取HTML5自定义属性data-*实例
- jQuery学习笔记之jQuery原型属性和方法
- jQuery过滤方法filter()选择具有特殊属性的元素
- 原生js和jQuery随意改变div属性style的名称和值
- jQuery实现隔行背景色变色
- jquery根据属性和index来查找属性值并操作
- jquery得到iframesrc属性值的方法