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

เขียนเมื่อ 12 ปีก่อน โดย Ninenik Narkdee
jquery style sheet

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ 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 ก็ได้


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



อ่านต่อที่บทความ













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











เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ