สมมติ xxx คือ selector
รูปแบบที่ 1 $("xxx").css(name);
name คือ property ใน style sheetใข้สำหรับดึงค่า property ใน style sheet โดยค่าของ property ส่งกลับมาในรูปแบบ String
ดูตัวอย่างโค้ดด้านล่าง
<script language="javascript">
$(function(){
var color=$("body").css("background-color");
});
</script>
จากโค้ดด้านบน เป็นการกำหนดตัวแปรชื่อ color มาเก็บค่าที่ได้จากฟังก์ชัืน css("name")
ของ jQuery ดังนั้นจะทำให้ ค่าของตัวแปรชื่อ color จะเป็นค่าของสีพื้นหลังของแท็ก <body>
ซึ่งเป็นตัว selector
รูปแบบที่ 2 $("xxx").css(property);
property คือ ชื่อและค่าของ property ใน style sheet
คำสั่งนี้ใช้สำหรับกำหนดค่าใน style sheet ใ้ห้กับตัว selector
ซึ่งจะเป็นการกำหนดในลักษณะมากกว่า 1 ค่า
<script language="javascript">
$(function(){
$("h2").css({backgroundColor:"red",color:"white"});
});
</script>
จากโค้ดด้านบนเป็นการกำหนด style sheet ให้กับแท็ก <h2> ซึ่งเป็นตัว selector
ผลที่ได้จะทำให้ <h2> มีสีพื้นหลังเป็นสีแดง และมีข้อความภายในเป็นสีขาว จะสังเกตเห็นว่า
ชื่อของ property จะเป็นชื่อที่เขียนในลักษณะของ javascript เข่น เขียน background-color
ใน style sheet และเขียน backgroundColor ในแบบ javascript นอกจากนั้นในฟังก์ชั่น
css(property); จะีมีเครื่องหมายปีกกาเปิดปิดภายในอีกด้วย คือ
css({ });
รูปแบบที่ 3 $("xxx").css(name,value);
name คือ ชื่อของ property ใน style sheet
value คือ ค่าของ property ใน style sheet
คำสั่งนี้ใช้สำหรับกำหนดค่าใน style sheet ใ้ห้กับตัว selector
ซึ่งจะเป็นการกำหนดแค่ค่าเดียว
<script language="javascript">
$(function(){
$("h2").css("backgroundColor","red");
});
</script>
เป็นการคำหนดค่าพื้นหลังให้กับ <h2>
name สามารถใช้ได้ทั้งชื่อที่เป็นแบบ style sheet เช่น background-color
หรือชื่อที่เป็นแบบ javascript เช่น backgroundColor ก็ได้
อ่านต่อที่บทความ