Rumah > hujung hadapan web > Soal Jawab bahagian hadapan > Bagaimana untuk mengubah suai kelas css dalam jquery

Bagaimana untuk mengubah suai kelas css dalam jquery

青灯夜游
Lepaskan: 2022-04-21 14:15:29
asal
3197 orang telah melayarinya

Kaedah pengubahsuaian: 1. Gunakan attr() untuk menetapkan nilai atribut kelas, ubah suai nama kelas css, sintaksnya ialah "element object.attr("class","new class""; Alih keluar kelas lama dan Untuk menambah kelas css baharu, sintaksnya ialah "elemen object.removeClass("nama kelas lama").addClass("nama kelas baharu").

Bagaimana untuk mengubah suai kelas css dalam jquery

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi jquery 1.10.2, komputer Dell G3.

Kaedah Jquery untuk mengubah suai kelas css

Kaedah 1: Gunakan attr() untuk menetapkan nilai atribut kelas dan mengubah suai css nama kelas

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

<!DOCTYPE html>

<html>

 

    <head>

        <meta charset="UTF-8">

        <script src="js/jquery-1.10.2.min.js"></script>

        <script type="text/javascript">

            $(document).ready(function() {

                $("button").click(function() {

                    $("p").attr("class","intro2");

                });

            });

        </script>

        <style type="text/css">

            .intro1 {

                font-size: 20px;

                color: red;

            }

 

            .intro2 {

                font-size: 30px;

                color: peru;

            }

        </style>

    </head>

 

    <body>

        <h1 id="h1">这是一个大标题</h1>

        <p class="intro1">这是一个段落</p>

        <button>修改css类</button>

    </body>

</html>

Salin selepas log masuk

Bagaimana untuk mengubah suai kelas css dalam jquery

Kaedah 2: Gunakan removeClass() untuk mengalih keluar kelas lama dan addClass() untuk menambah kelas css baharu

  • kaedah removeClass() mengalih keluar satu atau lebih kelas daripada elemen yang dipilih.

  • kaedah addClass() menambah satu atau lebih kelas pada elemen yang dipilih. Kaedah ini tidak mengalih keluar atribut kelas sedia ada, hanya menambah satu atau lebih atribut kelas.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

<!DOCTYPE html>

<html>

 

    <head>

        <meta charset="UTF-8">

        <script ></script>

        <script type="text/javascript">

            $(document).ready(function() {

                $("button").click(function() {

                    $("p").removeClass("intro2").addClass("intro1");

                });

            });

        </script>

        <style type="text/css">

            .intro1 {

                font-size: 20px;

                color: red;

            }

 

            .intro2 {

                font-size: 30px;

                color: peru;

            }

        </style>

    </head>

 

    <body>

        <h1 id="h1">这是一个大标题</h1>

        <p class="intro2">这是一个段落</p>

        <button>修改css类</button>

    </body>

</html>

Salin selepas log masuk

Bagaimana untuk mengubah suai kelas css dalam jquery

[Pembelajaran yang disyorkan: tutorial video jQuery, video bahagian hadapan web]

Atas ialah kandungan terperinci Bagaimana untuk mengubah suai kelas css dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan