简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

Atribut dan gaya jQuery (4)

Dengan menukar nama kelas secara dinamik, anda boleh mengubah suai elemen untuk menunjukkan kesan yang berbeza. Dalam struktur HTML, berbilang kelas dipisahkan oleh ruang Apabila nod (atau label) mengandungi berbilang kelas, atribut className bagi respons elemen DOM tidak memperoleh tatasusunan nama kelas, tetapi rentetan yang mengandungi ruang operasi berbilang kelas sangat menyusahkan. Pembangun jQuery yang sama juga mempertimbangkan situasi ini dan menambahkan kaedah .addClass() untuk menambahkan nama kelas secara dinamik

addClass( className ) kaedah

Lihat kod berikut:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
    <style type="text/css">
        div{
            width:200px;
            height:200px;
        }
        .bg{
            background:red;
        }
    </style>
</head>
<body>
    <div id="div">php 中文网</div>

    <script type="text/javascript">
        $("#div").addClass('bg');
    </script>
</body>
</html>


removeClass() Alih keluar gaya

Kes berikut: 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
    <style type="text/css">
        .div{
            width:200px;
            height:200px;
            background:red;
        }
    </style>
</head>
<body>
    <div class="div">php 中文网</div>

    <script type="text/javascript">
        $(".div").removeClass("div");
    </script>
</body>
</html>

Kod di atas, supaya gaya div kami dipadamkan


Meneruskan pembelajaran
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> <style type="text/css"> div{ width:200px; height:200px; } .bg{ background:red; } </style> </head> <body> <div id="div">php 中文网</div> <script type="text/javascript"> $("#div").addClass('bg'); </script> </body> </html>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492108 permainan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！