การควบคุม css ด้วย javascript

CSS คือการตกแต่งหน้าตาเว็บไซต์ ให้สวยงาม เป็นการแสดงผล เหมือน HTML ไม่สามารถโต้ตอบกับผู้ใช้ได้เหมือน php asp เราจะทำอย่างไรหากต้องการให้ หน้าตาเว็บไซต์ ถูกกำหนดโดยผู้ใช้ เลือกสีกรอบได้ คลิกแล้วเปลี่ยนกรอบได้

ในกรณีนี้ เราจะใช้ จาวาสคริป เข้ามาช่วยควบคุม ลองมาดูตัวอย่าง การทำ Toggle อย่างง่ายโดยเริ่มต้นเรามี HTML ดังนี้

เราจะเขียน javascript เพื่อเปลี่ยน style ของ div ดังนี้

บรรทัดที่ 1 เป็นการประกาศว่าเราจะใช้ จาวาสคริป แล้ว
บรรทัดที่ 2 ประกาศฟังชั่น ชื่อ toggle รับค่า1 ค่า ให้ชื่อ obj (object) ละกัน
บรรทัดที่ 3 ประกาศตัวแปร 1 ตัว ชื่อ el ย่อมาจาก element ให้เท่ากับ document.getElementById(obj) แปลว่า ไปที่เอกสาร แล้วไป get ค่า โดยมองจาก id ที่ชื่อ (obj) <-- อันนี้เด๋วจะส่ง abc ใส่เข้ามา
บรรทัดถัดมา เป็นเงื่อนไข ถ้า el มี style และมี display ไม่เท่ากับ none ก็ให้ ใส่ื none เข้าไป ถ้ามี none อยู่แล้วก็ให้ display เป็น ค่าว่างเปล่าๆ

เราสามารถใช้ style. แล้วตามด้วย property ของ css ได้เลย เช่น el.style.background , el.style.font-size เพื่อกำหนด css

จากนั้น เพิ่มลิ้งเพื่อเรียกใช้ฟังชั่นที่ HTML ดังนี้

ใส่ onclick="toggle(’abc’);" เพื่อ สั่งว่า เมื่อคลิกให้เรียกใช้ ฟังชั่น toogle โดยส่งค่า id ของ div คือ abc ไปแทนที่ obj

เมื่อกด ครั้งแรก เราส่งค่า abc เข้าไปที่มี display:none อยู่แล้ว javascript ก็จะเขียน style ให้ใหม่เป็น display:ค่าว่างๆ
พอกดครั้งที่สอง เราส่งค่าไปอีกครั้ง คราวนี้เป็นค่า display เปล่าๆ ไม่มี none ก็จะเข้าเงื่อนไข แรก javascript ก็จะเขียน style ให้ใหม่เป็น display:none

ส่วน return:false ใส่ไว้ เมื่อกดลิ้งค์ที่มี ค่าเป็น # หน้าเว็บจะไม่เด้งขึ้นไปบนสุด เป็นเทคนิคเล็กๆน้อยๆ