kaedah jQuery css
kaedah jQuery css()
kaedah css() menetapkan atau mengembalikan satu atau lebih sifat gaya elemen yang dipilih.
Kembalikan sifat CSS
Untuk mengembalikan nilai sifat CSS yang ditentukan, sila gunakan sintaks berikut:
css("propertyname");
Contoh berikut akan mengembalikan nilai warna latar belakang elemen padanan pertama:
<!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(){
alert("背景顏色 = " + $("p").css("background-color"));
});
});
</script>
</head>
<body>
<h2>這是一個標(biāo)題</h2>
<p style="background-color:#ff0000">這是一個段落。</p>
<p style="background-color:#00ff00">這是一個段落。</p>
<p style="background-color:#0000ff">這是一個段落。</p>
<button>返回 p 元素的 background-color </button>
</body>
</html>Jalankan program untuk mencubanya
Tetapkan sifat CSS
Untuk menetapkan sifat CSS tertentu, sila gunakan sintaks berikut:
css("propertyname","value");
Contoh berikut akan menetapkan nilai warna latar belakang untuk semua elemen yang sepadan:
<!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(){
$("p").css("background-color","yellow");
});
});
</script>
</head>
<body>
<h2>這是一個標(biāo)題</h2>
<p style="background-color:#ff0000">這是一個段落。</p>
<p style="background-color:#00ff00">這是一個段落。</p>
<p style="background-color:#0000ff">這是一個段落。</p>
<p>這是一個段落。</p>
<button>設(shè)置 p 元素的 background-color </button>
</body>
</html>Jalankan atur cara untuk cubalah
Tetapkan berbilang sifat CSS
Jika anda perlu menetapkan berbilang sifat CSS, sila gunakan sintaks berikut:
css({"propertyname":"value","propertyname":"value",...});
Contoh berikut akan menetapkan latar belakang- warna dan saiz fon untuk semua elemen padanan :
Instance
<!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(){
$("p").css({"background-color":"yellow","font-size":"150%"});
});
});
</script>
</head>
<body>
<h2>這是一個標(biāo)題</h2>
<p style="background-color:#ff0000">這是一個段落。</p>
<p >這是一個段落。</p>
<p style="background-color:#0000ff">這是一個段落。</p>
<p>這是一個段落。</p>
<button>為 p 元素設(shè)置多個樣式</button>
</body>
</html>Jalankan program dan cuba
