如何用JQuery操作CSS伪文档元素before或after中的content
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何用JQuery操作CSS伪文档元素before或after中的content相关的知识，希望对你有一定的参考价值。
::before，::after是伪元素并非doom元素，所以jquery无法选择伪元素。
如果确实需要实现修改伪元素的样式，可以通过下面的例子。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>pseudo-elements test by zhou2003737</title>
<style type="text/css">
p
color: deepskyblue;
p:before
content: attr(data-beforeContent);
color: darkred;
</style>
</head>
<body>
<p data-beforeContent="测试">1111</p>
</body>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(function()
<!--使用jquery1.8之前版本 click方法更改为toggle-->
var times = 0;
$('p').on('click',function()
switch (times)
case 0:
$(this).attr('data-beforeContent','你说啥都是对的');
times++;
break;
case 1:
$(this).attr('data-beforeContent','你这么叼咋不上天呢');
times++;
break;
case 2:
$(this).attr('data-beforeContent','那就上天吧');
times++;
break;
default :
times =0;
$(this).attr('data-beforeContent','你说啥都是对的');
times++;
break;
);
);
</script>
</html>
CSS伪元素:before和:after可以实现很多有趣的功能，我们项目中使用的ionicframework框架的ionic.css文件中大量使用到了这2个伪元素。伪元素可以用来定义样式，但是和正常的dom元素不同，我们没有办法选中这些伪元素，也就不能像普通元素那样来修改它。
这段HTML中我们用到了:before和:after在content前面和后面添加了target-before和target-after。如果我们想实现这个功能：点击按钮的时候，将target-before和target-after变成相应的颜色。这个时候我们就需要修改伪元素中定义的样式了。
Query由美国人John Resig创建，至今已吸引了来自世界各地的众多javascript高手加入其team，包括来自德国的Jörn Zaefferer，罗马尼亚的Stefan Petre等等。jQuery是继prototype之后又一个优秀的Javascrīpt框架。其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。
由于目前高校基本尚未开JavaScript的相关课程，目前jQuery的学习，使用，研究都仅限于在职Web程序员之间。
用jq的前提,首先要引用一个有jq的文件
lt;script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
这个是jquery官方最新的地址。可用在自己网站里加个这个，就能使用jquery了。 但仍然建议下载到本地服务器上。
参考技术B JQuery操作不了CSS伪元素给你提供个思路 你可以通过追加样式名
在css中给这两个样式名加 .style1.style2:beforecontent:""
通过优先级去改content 参考技术C 可以再写个类 移除原来的类，在添加该类
CSS伪元素（：之前/：之后）的jQuery .click（）事件？
【中文标题】CSS伪元素（：之前/：之后）的jQuery .click（）事件？【英文标题】：jQuery .click() event for CSS pseudoelement (:before/:after)? 【发布时间】：2011-09-26 09:50:07 【问题描述】：当我通过 CSS 伪元素 :before: 和 :after 插入的内容被点击时，我想触发一个 jQuery 动画。但是，我不确定如何执行此操作；我的第一个猜测，$(#id:before).click() 没有用。这是 jQuery 功能的一部分吗？如果是这样，我将如何选择before/after 内容？
【问题讨论】：
api.jquery.com/before /after @Mike Soule：那不是一回事。 【参考方案1】：jQuery 不支持 CSS :before 和 :after 选择器。 要选择兄弟姐妹，请使用.siblings()，然后从那里过滤。
http://api.jquery.com/siblings/
【讨论】：
+1 仅仅因为缺乏支持。不过，我应该说，.siblings() 不会选择伪元素，它会选择与当前范围内的元素完全不同的元素。 :before 和 :after 内容元素本身不是同级元素，它们是指定元素的子元素（但其内容的同级元素）。更多信息：w3.org/TR/CSS2/generate.html#before-after-content
糟糕，我的错误。谢谢你的澄清:)
感谢您，感谢@BoltClock 的澄清。我会给 jQuery .before/.after 方法一个镜头。以上是关于如何用JQuery操作CSS伪文档元素before或after中的content的主要内容，如果未能解决你的问题，请参考以下文章