คราวที่แล้วเป็นเรื่องของ selection แต่คราวนี้เรามาเรื่องความสวยงามกันครับนั่นคือ stylesheet นั่นเอง ซึ่งสามารถเพิ่ม style หรือลบ style ได้ครับ
เริ่มต้นด้วยวิธีการอ่านค่าของ style ที่ใช้อยู่ครับ
var fontSize = $('#celebs tbody tr:first').css('font-size');
alert(fontSize);
จากด้านบนเป็นการดึงค่า font-size ของ tr แรกสุดใน tbody ของ element ที่ id เป็น celebs ครับ การอ่านค่านี้จะสามารถได้แค่จาก element เดียวเท่านั้นแม้ว่าเราจะสามารถเลือกได้หลาย element แต่เวลาดึงค่าจะได้ของ element แรกที่เจอเท่านั้นครับ
ค่าที่ได้จาก css นั้นมาจาก calculated style ครับ ซึ่งแปลว่าเป็นค่าที่แสดงผลบน browser ไม่ใช่ค่าที่เรากำหนดใน css ครับ เช่น div เรากำหนดไว้สูง 200 pixel แต่หากข้อมูลเกินก็จะทำให้ div เราสูงขึ้น เวลาเราดึงค่าเราก็จะได้ค่าที่มากกว่า 200 ครับ
ต่อไปวิธีการกำหนดค่า CSS ครับ
ง่ายมากๆ
$('#celebs tbody tr:even').css('background-color','#dddddd');
โอ้แค่นี้แถวคี่ทั้งหมดก็จะมี background-color เป็น สีเทาแล้ว
Trick เล็กน้อยครับ เวลาเราใช้ในการ select ด้วย jquery นี้เราต้องรอให้ DOM เรา render เสร็จก่อนครับไม่งั้น jquery จะหาไม่เจอครับ
ต่อด้วยการใส่ css เพิ่มครับ
$('#celebs tbody tr:even').css('background-color','#dddddd');
$('#celebs tbody tr:even').css('color', '#666666');
สองบรรทัดนี้ เป็นการใส่ background-color และ color โดยแสดงทั้งสองอย่าง อย่างถูกต้องครับ ซึ่งหลายท่านอาจจะใช้กันอยู่
วันนี้มีอีกรูปแบบมานำเสนอครับ
$('#celebs tbody tr:even').css(
{'background-color': '#dddddd', 'color': '#666666'}
);
โอ๊ะโอ่ นั่นมันใส่แบบ object literal นี่หน่า ใช่ครับแค่นี้เราก็สามารถใส่ได้ หลาย style พร้อมกัน
ตัวอย่างสุดท้ายครับ
$('#celebs tbody tr:even').css({
'background-color': '#dddddd',
'color': '#666666',
'font-size': '11pt',
'line-height': '2.5em'
});
ความรู้จาก Sitepoint JQuery Novice to Ninja Feb 2010 ครับ
ไม่มีความคิดเห็น:
แสดงความคิดเห็น