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

html-css015

如何用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>

不是的,应该还有再上一层,它有几个目录,css文件夹,js文件夹和development-bundle文件夹,development-bundle文件夹里面的内容就是你看到的demos、docs、external、tests、themes、ui这几个文件夹,

其实你只要看js文件夹和css文件夹就行了,css文件夹当中就有你要得主题包文件夹,再进入的话就会有jquery-ui-1.8.2.custom.css文件了。

http://jqueryui.com/download

这个是下载地址,你看看你有没有下载对