jquery改变选中对象的css,使用jQuery选择和操作CSS伪元素,例如:: before和:: after
DIEA
您认为这将是一个简单的问题,jQuery可以做的其他事情。不幸的是,问题归结为一个技术问题:css:after和:之前规则不是DOM的一部分,因此不能使用jQuery的DOM方法进行更改。有一些方法可以使用JavaScript和/或CSS解决方法来操纵这些元素; 您使用哪一个取决于您的确切要求。我将从广泛认为的“最佳”方法开始:1)添加/删除预定的类在这种方法中,您已经在CSS中创建了一个具有不同:after或:before样式的类。稍后将此“新”类放在样式表中以确保它覆盖:p:before {
content: "foo";}p.special:before {
content: "bar";}然后,您可以使用jQuery(或vanilla JavaScript)轻松添加或删除此类:$('p').on('click', function() {
$(this).toggleClass('special');}); $('p').on('click', function() { $(this).toggleClass('special'); });p:before { content: "foo"; color: red; cursor: pointer;}p.special:before { content: "bar";}
This is a paragraph.
This is another paragraph.
优点:易于使用jQuery实现; 快速改变多种风格; 强制分离关注点(将CSS和JS与HTML隔离)缺点: CSS必须预先编写,因此内容:before或:after不完全是动态的2)将新样式直接添加到文档的样式表中它可以使用JavaScript来直接添加样式文档样式,包括:after和:before风格。jQuery没有提供方便的快捷方式,但幸运的是JS并不复杂:var str = "bar";document.styleSheets[0].addRule('p.special:before','content: "'+str+'";');var str = "bar";document.styleSheets[0].addRule('p.special:before', 'content: "' + str + '";');p:before { content: "foo"; color: red;}
This is a paragraph
This is another paragraph
.addRule().insertRule()今天相关的方法得到了很好的支持。作为一种变体,您还可以使用jQuery在文档中添加一个全新的样式表,但必要的代码不是更清晰:var str = "bar";$('').appendTo('head');var str = "bar";$('').appendTo('head');p:before { content: "foo"; color: red;}
This is a paragraph
This is another paragraph
如果我们谈论的是“操纵”这些值,而不仅仅是添加它们,我们还可以:after:before使用不同的方法来阅读现有的或样式:var str = window.getComputedStyle(document.querySelector('p'), ':before')
.getPropertyValue('content');var str = window.getComputedStyle($('p')[0], ':before').getPropertyValue('content');console.log(str);document.styleSheets[0].addRule('p.special:before', 'content: "' + str+str + '";');p:before { content:"foo"; color: red;}
This is a paragraph
This is another paragraph
我们可以更换document.querySelector('p')与$('p')[0]使用jQuery时,为略短代码。优点:任何字符串都可以动态插入到样式中缺点:原始样式不会改变,只是被覆盖; 重复(ab)使用可以使DOM长得任意大3)改变不同的DOM属性您还可以在CSS中使用attr()以读取特定的DOM属性。(如果浏览器支持:before,它支持attr()为好。)通过这种结合content:在一些精心准备的CSS,我们可以改变的内容(而不是其他属性,像保证金或颜色):before和:after动态:p:before {
content: attr(data-before);
color: red;
cursor: pointer;}JS:$('p').on('click', function () {
$(this).attr('data-before','bar');});$('p').on('click', function () { $(this).attr('data-before','bar');});p:before { content: attr(data-before); color: red; cursor: pointer;}
This is a paragraph.
This is another paragraph.
如果无法提前准备CSS,则可以将其与第二种技术结合使用:var str = "bar";document.styleSheets[0].addRule('p:before', 'content: attr(data-before);');$('p').on('click', function () { $(this).attr('data-before', str);});var str = "bar";document.styleSheets[0].addRule('p:before', 'content: attr(data-before) !important;');$('p').on('click', function() { $(this).attr('data-before', str);});p:before { content: "foo"; color: red; cursor: pointer;}
This is a paragraph.
This is another paragraph.
优点:不会创造无穷无尽的风格缺点: attr在CSS中只能应用于内容字符串,而不是URL或RGB颜色
jquery改变选中对象的css,使用jQuery选择和操作CSS伪元素,例如:: before和:: after相关推荐
- [css] 有哪些标签是不支持伪元素的?
[css] 有哪些标签是不支持伪元素的? 首先我们要知道伪元素有哪些: ::after ::before ::first-letter ::fist-line (单双冒号皆可) ::selection ...
- [css] 不用换行的标签,怎么伪元素实现换行的效果?
[css] 不用换行的标签,怎么伪元素实现换行的效果? 使用\A 换行,并且指定white-space: pre保留换行效果.foo::after {content: '123\A 456';whit ...
- 【CSS】1049- 深入了解::before 和 ::after 伪元素
本文从最简单的开始,解释如何理解和使用::before和::after.然后再在实际使用场景中去应用它. ::before和::after是什么? ::before和::after可以添加到选择器以创 ...
- 如何用css和HTML结合画熊,结合伪元素实现的纯CSS3高级图形绘制
自小编上次整理了一些基础图形的绘制方法之后,大家都纷纷表示对css3的绘图技巧学习很有帮助.虽说万变不离其宗,再复杂的图形也可以用最简单的三角形或者圆弧组合出来,但仍有不少朋友反映,学会基本图形也不懂 ...
- html面包屑菜鸟,css content属性与before及after伪元素配合使用价值发挥到最大
content属性需要与before及after伪元素配合使用,作用是可以定义伪元素所显示的内容,本文主要列举content的可选值及实用的案例与技巧
- CSS笔记(一):before伪元素实现半透明背景图
2019独角兽企业重金招聘Python工程师标准>>> 通过给元素before伪元素作为背景图片的载体,实现半透明背景. 这样的好处是避免直接调整opacity导致前景及子元素也变透 ...
- css选择器(选择div内所有p元素)
情况1:<div><p></div> 情况2:<div><a><p></p></a></div&g ...
- 前端总结(html css js jQuery)
前端三剑客总结在这里插入代码片 架构模式:c/s 和 b/s (客户端/服务器 浏览器/服务器 ) 我们学的是b/s架构模式. 资源分类:动态和静态资源 动态资源需要用到数据库(不是动一动就是动态资源 ...
- 会html css找啥类型工作,HTML+CSS+JS
HTML+CSS+JS 1. HTML(超文本标识语言)http://www.w3school.com.cn/html/index.asp 1.1 基本结构 网页标题 网页显示区域(一般要实现的代码都 ...
最新文章
- android 音视频流采集,Android 音视频开发(四):使用 Camera API 采集视频数据(示例代码)...
- 以非root 用戶安裝並啟動高級單服務器版
- tomcat 环境配置
- Software Ate The World, Open Source Is Eating The Software World
- SCU 4438 Censor
- Sql Server之旅——第十二站 对锁的初步认识
- 数位dp总结 之 从入门到模板(stO)
- oracle表违反主键约束,主键/约束/事务/表关系 Oracle
- 给一个aspx页面上所有的TextBox置值
- 微课|中学生可以这样学Python(例8.23):快速排序算法
- 外国谷歌服务器练中国无线,易观:中国无线搜索市场百度谷歌份额超50%
- 正则表达式 匹配点号_自动化关联篇JMeter(十)-正则表达式关联
- 矩阵计算 动手学深度学习 pytorch
- 从零学爬虫:采集房天下二手房信息
- 加油站防火防爆及危险区域划分
- Python爬虫的应用:统记词频
- python安装包的时候报错 ERROR: Exception: Traceback (most recent call last): File “C:\Users\
- Spring自定义AOP切面
- Smart-link 实验(超详细)
- android7.0计时器代码,iCountTimer Pro(锻炼计时器)
热门文章
- 【wordpress】
- vue3组合式api实现组件传值
- android 自定义关机界面,android源码探索之定制android关机界面的方法
- 【方法】树莓派小车自动循迹(摄像头)
- Unity3D Android手机屏幕分辨率问题
- SpringSecurity问题分析之AccessDeniedException: Access is denied 源码分析
- 【23全网最新!最全】统计方法(SAS、SPSS和R统计软件应用)——单元测试答案
- SQL全方位攻略:3.SQL标准
- iconv 编码转换
- Apm飞控学习笔记之-RC_Channel遥控器数据获取-Cxm