วิธีทำให้ DIV มองเห็นและมองไม่เห็นด้วย JavaScript

คุณสามารถทำสิ่งที่ชอบ

function showDiv()
{
    [DIV].visible = true;
    //or something
}

ถ้า [DIV] เป็นองค์ประกอบแล้ว

[DIV].style.visibility='visible'

หรือ

[DIV].style.visibility='hidden' 

สมมติว่าคุณไม่ได้ใช้ไลบรารีเช่น jQuery

หากคุณยังไม่มีการอ้างอิงถึงองค์ประกอบ DOM ให้รับหนึ่งโดยใช้ var elem = document.getElementById('id');

จากนั้นคุณสามารถตั้งค่าคุณสมบัติ CSS ขององค์ประกอบนั้น ในการแสดง / ซ่อนคุณสามารถใช้คุณสมบัติสองอย่าง: displayและvisibilityซึ่งมีลักษณะพิเศษที่แตกต่างกันเล็กน้อย:

การปรับstyle.displayจะดูเหมือนว่าไม่มีองค์ประกอบอยู่เลย ("ลบออก")

elem.style.display = 'none'; // hide
elem.style.display = 'block'; // show - use this for block elements (div, p)
elem.style.display = 'inline'; // show - use this for inline elements (span, a)

หรือstyle.visibilityจะทำให้ div ยังคงอยู่ที่นั่น แต่เป็น "all empty" หรือ "all white"

elem.style.visibility = 'hidden'; // hide, but lets the element keep its size
elem.style.visibility = 'visible';

หากคุณใช้ jQuery คุณสามารถทำได้ง่ายขึ้นตราบเท่าที่คุณต้องการตั้งค่าdisplayคุณสมบัติ:

$(elem).hide();
$(elem).show();

มันจะใช้displayค่าที่เหมาะสมโดยอัตโนมัติ คุณไม่ต้องสนใจประเภทองค์ประกอบ (แบบอินไลน์หรือบล็อก) นอกจากนี้elemไม่เพียง แต่สามารถเป็นองค์ประกอบ DOM แต่ยังเป็นตัวเลือกเช่น#idหรือ.classหรือสิ่งอื่น ๆ ที่เป็น CSS3 ที่ถูกต้อง (และอื่น ๆ !)

คุณสามารถใช้visibilityหรือdisplayแต่คุณต้องใช้การเปลี่ยนแปลงกับdiv.styleวัตถุไม่ใช่divวัตถุนั้นเอง

var div = document.getElementById('div_id');

// hide
div.style.visibility = 'hidden';
// OR
div.style.display = 'none';

// show
div.style.visibility = 'visible';
// OR
div.style.display = 'block';

คุณสามารถใช้ฟังก์ชัน DOM: setAttribute และ removeAttribute ในลิงค์ต่อไปนี้คุณมีตัวอย่างวิธีการใช้งาน

setAttribute และฟังก์ชัน removeAttribute

มุมมองอย่างรวดเร็ว:

hide:    document.getElementById("myDiv").setAttribute("hidden","");
unhide:  document.getElementById("myDiv").removeAttribute("hidden");

คุณสามารถใช้opacityสิ่งที่คล้ายกับvisibility แต่อนุญาตให้เปลี่ยนได้อย่างราบรื่นและควบคุมพารามิเตอร์อื่น ๆ เช่นความสูง (สำหรับความเรียบง่ายของตัวอย่างฉันใส่ js logic ใน html โดยตรง - อย่าทำในรหัสการผลิต)

.box { width:150px; height: 150px; background: red; transition: 0.5s }

.hide { opacity: 0; height: 10px}

<div id="box" class="box"></div>

<button onclick="box.classList.toggle('hide')">Toggle</button>

ใช้แอตทริบิวต์ "hidden" ขององค์ประกอบ DOM:

function showDiv(isVisible)
{
    [DIV].hidden = !isVisible;
}

ทำให้มองไม่เห็นโดยใช้ CSS

#div_id {
        /*height: 400px;*/
         visibility:hidden;
    }

ทำให้มองเห็นได้โดยใช้ Javascript

document.getElementById('div_id').style.visibility = 'visible';