การควบคุม CSS ด้วย javascript อย่างง่าย

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

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

เริ่มต้นเรามี HTML ดังนี้

<h2>Menu</h2>
<div id="abc" style="display:none";>
submenu
submenu
</div>

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

<script type="text/javascript">
function toggle(obj) {
	var el = document.getElementById(obj);
	if ( el.style.display != 'none' ) {
		el.style.display = 'none';
	}
	else {
		el.style.display = '';
	}
}
</script>

บรรทัดที่ 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 ดังนี้

<h2><a href="#" onclick="toggle('abc');return false">Menu</a></h2>
<div id="abc" style="display:none";>
submenu
submenu
</div>

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

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

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

ผลที่ได้ ลองกดที่ ลิ้งค์ คำว่า์ menu ด้านล่างนี้

Menu

ตัวอย่างนี้อาจจะงงไปสักหน่อย สำหรับผู้ที่ไม่มีพื้นฐาน จาวาสคริปเลย ลองศึกษา จาวาสคริปสักหน่อย แล้วจะเข้าใจครับ สามารถ นำไปประยุกต์ใช้ได้อีกหลายอย่างเช่น ทำลิ้งค์ให้ผู้ใช้เลือกขนาดอักษรในหน้าเว็บได้ หรือ ทำลิ้งค์ให้ผู้ใช้ เลือกสี แบ็คกราวน์ทั้งหมดในหน้าเว็บได้

ตัวอย่างการนำไปใช้ แบบ html

toggle.html

Related Articles

• ใช้ภาพแทน text link (9)
• เทคนิค css 1 บรรทัด (6)
• ทำปุ่มเมนู CSS ขอบมนโดยใช้รูปเดียว (21)
• ทำ opacity ให้ cross browser (17)
• ทำ layout ให้สูงเท่ากัน ทุกคอลัมน์ (12)