มีสองวิธีในการซ่อนตัวควบคุมโดยใช้ JavaScript วิธีหนึ่งคือการตั้งค่าแอตทริบิวต์ "display" และ "visibility" ของสไตล์ของตัวควบคุม การควบคุมจะมองเห็นได้เมื่อ style.display="block" หรือ style.visibility="visible" และจะมองไม่เห็นเมื่อ style.display="none" หรือ style.visibility="hidden" ข้อแตกต่างก็คือ "การแสดงผล" ไม่เพียงแต่ซ่อนการควบคุมเท่านั้น แต่ยังรวมถึงการควบคุมที่ซ่อนอยู่จะไม่ครอบครองตำแหน่งที่ถูกครอบครองอีกต่อไปในขณะที่แสดง ในขณะที่การควบคุมที่ซ่อนอยู่โดย "การมองเห็น" จะตั้งค่าให้มองไม่เห็นการควบคุมเท่านั้น และการควบคุมยังคงครองตำแหน่งเดิม ตำแหน่ง.
คัดลอกรหัสรหัสดังต่อไปนี้:
ฟังก์ชั่น displayHideUI()
-
var ui = document.getElementById("bbs");
ui.style.display="ไม่มี";
-
ฟังก์ชั่น displayShowUI()
-
var ui = document.getElementById("bbs");
ui.style.display=" ";//มันจะทำงานถ้าจอแสดงผลว่างเปล่า แต่ถ้าเป็นบล็อก พื้นที่ต่อไปนี้จะถูกตัดคำ
-
ฟังก์ชั่นการมองเห็นHideUI()
-
var ui = document.getElementById("bbs");
ui.style.visibility="ซ่อน";
-
ฟังก์ชั่นการมองเห็นShowUI()
-
var ui = document.getElementById("bbs");
ui.style.visibility="มองเห็นได้";
-
</สคริปต์>
คำอธิบายค่า
ไม่มี องค์ประกอบนี้จะไม่ปรากฏ
block องค์ประกอบนี้จะแสดงเป็นองค์ประกอบระดับบล็อกโดยมีตัวแบ่งบรรทัดก่อนและหลังองค์ประกอบนี้
ค่าเริ่มต้นแบบอินไลน์ องค์ประกอบนี้จะแสดงเป็นองค์ประกอบแบบอินไลน์โดยไม่มีการขึ้นบรรทัดใหม่ก่อนหรือหลังองค์ประกอบ
องค์ประกอบบล็อกแบบอินไลน์ (ค่าใหม่ใน CSS2.1)
list-item องค์ประกอบนี้จะถูกแสดงเป็นรายการ
run-in องค์ประกอบนี้จะปรากฏเป็นองค์ประกอบระดับบล็อกหรือองค์ประกอบแบบอินไลน์ ขึ้นอยู่กับบริบท
กะทัดรัด มีค่ากะทัดรัดใน CSS แต่มันถูกลบออกจาก CSS2.1 เนื่องจากขาดการสนับสนุนอย่างกว้างขวาง
marker มีเครื่องหมายค่าใน CSS แต่ถูกลบออกจาก CSS2.1 เนื่องจากขาดการสนับสนุนอย่างกว้างขวาง
ตาราง องค์ประกอบนี้จะแสดงเป็นตารางระดับบล็อก (คล้ายกับ <table>) โดยมีการแบ่งบรรทัดก่อนและหลังตาราง
inline-table องค์ประกอบนี้จะแสดงเป็นตารางอินไลน์ (คล้ายกับ <table>) โดยไม่มีการแบ่งบรรทัดก่อนและหลังตาราง
ตารางแถวกลุ่มองค์ประกอบนี้จะถูกแสดงเป็นกลุ่มของหนึ่งหรือหลายแถว (คล้ายกับ <tbody>)
table-header-group องค์ประกอบนี้จะแสดงเป็นกลุ่มตั้งแต่หนึ่งแถวขึ้นไป (คล้ายกับ <thead>)
table-footer-group องค์ประกอบนี้จะแสดงเป็นกลุ่มตั้งแต่หนึ่งแถวขึ้นไป (คล้ายกับ <tfoot>)
table-row องค์ประกอบนี้จะแสดงเป็นแถวของตาราง (คล้ายกับ <tr>)
ตารางคอลัมน์กลุ่ม องค์ประกอบนี้จะถูกแสดงเป็นกลุ่มของหนึ่งคอลัมน์ขึ้นไป (คล้ายกับ <colgroup>)
table-column องค์ประกอบนี้จะแสดงเป็นคอลัมน์ของเซลล์ (คล้ายกับ <col>)
table-cell องค์ประกอบนี้จะถูกแสดงเป็นเซลล์ตาราง (คล้ายกับ <td> และ <th>)
table-caption องค์ประกอบนี้จะถูกแสดงเป็นชื่อตาราง (คล้ายกับ <caption>)
inherit ระบุว่าค่าของแอตทริบิวต์ display ควรสืบทอดมาจากองค์ประกอบหลัก