เมธอด css
เมธอด css ช่วยให้สามารถรับ
และเปลี่ยนแปลงสไตล์ CSS ขององค์ประกอบได้
สิ่งสำคัญที่ควรจำคือ เราจะได้รับ 'ค่าที่คำนวณแล้ว'
ของคุณสมบัติ (computed style
properties) ซึ่งอาจแตกต่างจาก
ที่ระบุไว้ในสไตล์ CSS
ไวยากรณ์
รับคุณสมบัติเดียว:
$(ตัวเลือก).css(คุณสมบัติ);
รับคุณสมบัติหลายรายการ โดยส่งพารามิเตอร์ เป็นอาร์เรย์ของชื่อคุณสมบัติ:
$(ตัวเลือก).css(['width', 'height', 'color']);
เปลี่ยนแปลงคุณสมบัติเดียว:
$(ตัวเลือก).css(คุณสมบัติ, ค่าใหม่);
เปลี่ยนแปลงคุณสมบัติหลายรายการ โดยส่งเป็นอ็อบเจกต์
ที่มีคู่ 'คีย์: ค่า' ชื่อคุณสมบัติ
ระบุในรูปแบบ CamelCase:
$(ตัวเลือก).css({fontSize: '12px', color: 'red'});
หรืออีกทางเลือกหนึ่ง:
<p class="www">ข้อความ</p>
$('.www').css({'font-size':'12px', 'color':'red'});
นอกจากนี้ เรายังสามารถใช้ฟังก์ชันที่กำหนดให้กับแต่ละ
องค์ประกอบในชุดได้ โดยฟังก์ชันจะได้รับพารามิเตอร์แรกเป็นหมายเลขขององค์ประกอบในชุด และพารามิเตอร์ที่สอง
คือค่าปัจจุบันของคุณสมบัติ CSS ที่กำหนด
สำหรับองค์ประกอบนั้น ๆ โดยที่ this
ภายในฟังก์ชันจะชี้ไปยังองค์ประกอบปัจจุบัน
คุณสมบัติ CSS ของแต่ละองค์ประกอบจะเปลี่ยนเป็นค่า
ที่ฟังก์ชันส่งคืนสำหรับองค์ประกอบนั้นโดยเฉพาะ:
$(ตัวเลือก).css(ชื่อคุณสมบัติ, function(หมายเลขในชุด, ค่าปัจจุบันของคุณสมบัติ css));
ตัวอย่าง
มาเรียกองค์ประกอบทั้งหมดที่มีคลาส www
และเปลี่ยนสีของพวกมันเป็นสีแดงกัน:
<p class="www">ข้อความ</p>
$('.www').css('color', 'red');
ตัวอย่าง
มาเรียกองค์ประกอบทั้งหมดที่มีคลาส www
และเปลี่ยนสีของพวกมันเป็นสีแดง และขนาดฟอนต์
เป็น 20px กัน:
<p class="www">ข้อความ</p>
$('.www').css({color:'red', fontSize:'20px'});
หรืออีกทางเลือกหนึ่ง:
<p class="www">ข้อความ</p>
$('.www').css({'color':'red', 'font-size':'20px'});
