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

jQuery - Dapatkan dan tetapkan kelas CSS

jQuery Memanipulasi CSS

jQuery mempunyai beberapa kaedah untuk manipulasi CSS. Kami akan mempelajari perkara berikut:

addClass() - Tambah satu atau lebih kelas pada elemen yang dipilih

removeClass() - Alih keluar satu atau lebih kelas daripada elemen yang dipilih

toggleClass() - Tambah/padam operasi penukaran kelas untuk elemen terpilih

css() - Tetapkan atau kembalikan atribut gaya

Helaian gaya

.penting

{

berat fon:tebal;

saiz fon: xx-besar;

}


kaedah addClass() 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("h1,h2,p").addClass("blue");
    $("div").addClass("important");
  });
});
</script>
<style type="text/css">
.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}
</style>
</head>
<body>
<h1>标题 1</h1>
<h2>标题 2</h2>
<p>段落1</p>
<p>段落2</p>
<div>文本</div>
<br>
<button>为元素添加 class</button>
</body>
</html>

Anda juga boleh menentukan berbilang kelas dalam kaedah addClass() :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").addClass("important blue");
  });
});
</script>
<style type="text/css">
.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}
</style>
</head>
<body>
<div id="div1">文本。</div>
<div id="div2">文本。</div>
<br>
<button>为第一个元素添加类</button>
</body>
</html>


kaedah removeClass()

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("h1,h2,p").removeClass("blue");
  });
});
</script>
<style type="text/css">
.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}
</style>
</head>
<body>
<h1 class="blue">标题 1</h1>
<h2 class="blue">标题 2</h2>
<p class="blue">段落1</p>
<p>段落2</p>
<br>
<button>从元素中移除 class</button>
</body>
</html>


kaedah toggleClass()

Kaedah ini ialah Elemen yang dipilih melakukan operasi penukaran untuk menambah/memadam kelas: 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("h1,h2,p").toggleClass("blue");
  });
});
</script>
<style type="text/css">
.blue
{
color:blue;
}
</style>
</head>
<body>
<h1 class="blue">标题 1</h1>
<h2 class="blue">标题 2</h2>
<p class="blue">段落1</p>
<p>段落2</p>
<br>
<button>切换 class</button>
</body>
</html>


Meneruskan pembelajaran
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#btn").click(function(){ $("div").addClass("border reset"); }) }) </script> <style type="text/css"> div{ height:100px; width:200px; } .border{ border:2px solid blue; } .reset{ font-size:20px; color:green; } </style> </head> <body> <div>php.cn欢迎您</div> <button id="btn">点击查看效果</button> </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)  492196 permainan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！