การเปลี่ยนค่า attribute ของ css ใน HTML ด้วยจาวาสคริป
หากเราต้องการแก้ไขค่า css ใน html ด้วยจาวาสริปแล้ว (javascript) เราก็สามารถทำได้โดยง่ายนะครับ หากเราต้องการทำดังกล่าวสมารถ ทำได้ดังตัวอย่างคำสั่งต่อไปนี้นะครับ
document.getElementById("idElement").setAttribute("class", "className");
เมื่อ className หมายถึงการกำหนดคุณสมบัติใหม่ ๆ ใด ๆ ลงไป แทนคลาสเดิม
เช่นตัวอย่าง
หมายเหตุ เปลี่ยน [ = < และ ] = >
[div id="myElement"]Welcome on my site![/div]
[a href="javascript:changeClass()"]Change Class[/a]
[script language="javascript"]
function changeClass(){
document.getElementById("idElement").setAttribute("class", "myClass");
}
[/script]
จากตัวอย่างจะมี tag อยู่ ซึ่งจะถูกควบคุมการแสดงผลด้วย class name ที่ชื่อว่า myElement คำสั่งของ javascript ด้านล่างจะเป็นการแสดงตัวอย่างการทำงานของการเปลี่ยนคลาสของ html (หรือส่วนของ css นั่นเอง) ในขณะที่กำลังทำงาน โดยไม่ต้อง refresh หน้าเว็บใหม่ โดยกำหนดให้การแสดงผลใหม่ถูกควบคุมด้วย class name ที่ชื่อว่า myClass
ไม่มีความคิดเห็น:
แสดงความคิดเห็น