PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum


รู้จักฟังก์ชันของ jQuery ในการกำหนด Style Sheet

25 September 2008 By
jquery style sheet


สมมติ 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 ก็ได้





Tags:: style sheet jquery






อย่าลืมกด Like กด Share เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ


URL สำหรับอ้างอิง