如何用JQuery操作CSS伪文档元素before或after中的content

 我来答
zhou2003737
2016-05-24 · TA获得超过1427个赞
知道小有建树答主
回答量:1082
采纳率:77%
帮助的人:399万
展开全部
  1. ::before,::after是伪元素并非doom元素,所以jquery无法选择伪元素。

  2. 如果确实需要实现修改伪元素的样式,可以通过下面的例子。


  3. <!DOCTYPE html>
    <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>
洒脱又恬淡灬长颈鹿D
2018-04-09 · TA获得超过2.1万个赞
知道小有建树答主
回答量:158
采纳率:100%
帮助的人:23.4万
展开全部

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&ouml;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了。 但仍然建议下载到本地服务器上。

本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
安静了zjw29a
2016-05-24 · TA获得超过117个赞
知道小有建树答主
回答量:105
采纳率:100%
帮助的人:50.7万
展开全部
JQuery操作不了CSS伪元素
给你提供个思路 你可以通过追加样式名
在css中给咐简这两个样式掘简判名加 .style1.style2:before{content:""}
通过优先级去改判改content
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
无嫣的海角
2016-05-24 · TA获得超过163个赞
知道小有建树答主
回答量:241
采纳率:0%
帮助的人:83.9万
展开全部
可以再写个类 移除原来的类,在添加该类
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 1条折叠回答
收起 更多回答(2)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式