รู้จักฟังก์ชันของ jQuery ในการกำหนด Style Sheet
เขียนเมื่อ 15 ปีก่อน โดย Ninenik Narkdeejquery 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 ก็ได้
อ่านต่อที่บทความ
-
25 Sep2008หาตำแหน่งของ element แนวแกน x แกน y ด้วยฟังก์ชันของ jQuery อ่าน 12,601
สมมติ xxx คือ selector รูปแบบฟังก์ชัน $("xxx").offset(); เป็นฟัง
คำแนะนำ และการใช้งาน
สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก
- ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ