การใช้ Css สไตล์เรา ซ่อน หรือ แสดง องค์ประกอบ HTML ในจาวาสคริปต์ Css ให้คุณสมบัติเช่น บล็อก และ ไม่มี เพื่อซ่อน/แสดงองค์ประกอบ HTML
ซ่อนองค์ประกอบ
ตัวอย่าง
ในตัวอย่างต่อไปนี้เมื่อปุ่ม "ซ่อน" ได้คลิกข้อความในแท็กย่อหน้าหายไปตามที่แสดงในผลลัพธ์
<html>
<body>
<p id="hide">Using JavaScript to hide HTML elements.</p>
<input type="button" onclick="document.getElementById('hide').style.display='none' value="Hideme">
</body>
</html> เมื่อรันโค้ดข้างต้นแล้ว จะแสดงสิ่งต่อไปนี้
จากบล็อกด้านบน หากเราคลิกที่ปุ่ม "ซ่อน" ข้อความที่อยู่ในบล็อกจะหายไปตามที่แสดงในผลลัพธ์ เหลือเพียงปุ่มเท่านั้น
ผลลัพธ์
กำลังแสดงองค์ประกอบ
ตัวอย่าง
ในตัวอย่างต่อไปนี้ ข้อความในแท็กย่อหน้าจะถูกซ่อนไว้ตั้งแต่แรก แต่เมื่อคลิกที่ "Showme" ข้อความก็ปรากฏขึ้นตามที่แสดงในผลลัพธ์
<html>
<body>
<p id="show" style="display:none">JavaScript can show hidden HTML elements</p>
<input type="button"onclick="document.getElementById('show').style.display='block'"value="ShowMe">
</body>
</html> เมื่อโค้ดด้านบนถูกเรียกใช้งาน สิ่งต่อไปนี้จะปรากฏบนหน้าจอ
หากเราคลิกปุ่มด้านบน ผลลัพธ์ต่อไปนี้จะถูกดำเนินการ
ผลลัพธ์
