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

html-css014

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

::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="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>

使用这个方法可以对dom节点添加和移除style样式,其中的styleName可以为css样式的任何值,如:display、color

对dom节点添加一个class

对dom节点移除一个class