รู้จักฟังก์ชันของ jQuery ในการกำหนด Style Sheet
25 September 2008สมมติ 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 ก็ได้
บทความในหมวดที่่น่าสนใจ อื่นๆ
บทความคนเข้าอ่านวันนี้
22 Nov 08 ซ่อนและแสดงเนื้อหาแบบหีบเพลง (accordion) ด้วย jquery อย่างง่าย อ่าน 4706 25 Sep 08 ฟังก์ชั่นเกี่ยวกับ วันที่ เวลา ใน javascript อ่าน 7132 19 Mar 11 การสร้างปุ่ม ล็อกอิน เว็บไซต์ แบบไม่แสดงรูป ด้วย facebook อ่าน 1827 30 Sep 08 แปลงตัวแปร String เป็นค่าตัวเเลข อ่าน 2779 10 Feb 10 ประยุกต์ สร้าง FTP Function สำหรับการจัดการไฟล์ผ่าน FTP Protocal อ่าน 1392 13 Oct 08 คำสั่ง SQL BETWEEN อ่าน 9071 06 Jan 09 บวกวันใน javascript ด้วยฟังก์ชัน day add อย่างง่าย อ่าน 3848 14 Sep 10 การดึงข้อมูล จากฐานข้อมูล สร้าง xml ไฟล์ ด้วย php อ่าน 4055 17 Jan 11 เทคนิค วิธี การแสดงข้อมูล ด้วยเงื่อนไข วันที่ date ใน mysql อ่าน 3187 31 Jul 10 เทคนิค ประยุกต์ใช้ ajax ใน jQuery ร่วมกับ iframe กับการอัพโหลดรูป อ่าน 4364 16 Aug 09 jQuery UI คือ อะไร อ่าน 4318 25 Sep 08 สิ่งที่เรียกว่า Selects, Properties , and Values สิ่งที่เป็นองค์ประกอบของ CSS อ่าน 2833 14 Nov 08 สร้างป้ายโฆษณาเลื่อนตามจอภาพ ด้วย jquery ได้ในไม่กี่บรรทัด อ่าน 6854 15 Feb 09 สร้างเมนู Accordion อย่างง่ายแบบที่ 2 ด้วย jQuery อ่าน 4438 04 Nov 09 ประยุกต์สร้าง pdf ไฟล์ จาก tcpdf class ด้วย php รองรับภาษาไทย อ่าน 5301 25 Sep 08 javasdcript กับการเข้ารหัส encoding และการถอดรหัส decoding อ่าน 3802 25 Sep 08 แบ่งหน้า ด้วย Code แบบง่าย อ่าน 5652 05 Jul 10 ทบทวน วันที่ date object ใน javascript อ่าน 2776 12 Sep 10 จัดรูปแบบ ScaleControlOptions ใน Google Map อ่าน 1162 18 Oct 08 รู้จักการใช้งานฟังก์ขัน after() ใน jquery อ่าน 2814