如何用JQuery *** 作CSS伪文档元素before或after中的content_服务器

::before，::after是伪元素并非doom元素，所以jquery无法选择伪元素。

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

<!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="jqueryminjs"></script>
<script type="text/javascript">
    $(function(){
        
             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>

欢迎分享，转载请注明来源：内存溢出

原文地址: https://outofmemory.cn/zz/13437624.html

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

发表评论

评论列表（0条）