Як зробити DIV видимим і невидимим за допомогою JavaScript

113

Ви можете зробити щось подібне

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

javascript html

— Нейрон
джерело

1

Чому б просто не використовувати Jquery? .hide ()?

— кодерама

Чи використовую я це для імені діва, тож якби діва був названий тестом, я би зробив test.hide()?

8

@JackStone: Ні, це лише в тому випадку, якщо ви вже використовуєте бібліотеку jQuery. Деяким людям просто подобається рекламувати його в кожному питанні JavaScript. Навіть якби ти був, .hide()не встановлює видимість. Він встановлює показ.

6

@am не я, ви явно не зрозуміли, що jQuery - це справді чудово і робить усе. (Джерело зображення)

— Pekka

8

Щось подібне, хороша відповідь повинна містити як звичайне рішення JS, так і те, що показує перевагу використання бібліотеки - у цьому випадку не потрібно мати справу з вбудованим блоком проти блоку при використанні displayдля показу елемента.

— ThiefMaster

139

якщо [DIV] - елемент, то

[DIV].style.visibility='visible'

АБО

[DIV].style.visibility='hidden'

— ron tornambe
джерело

16

visibilityмає побічний ефект, що простір, займаний елементом, залишається зарезервованим. Це може бути, а може і не бути те, чого хоче ОП

— Пекка

1

У місці, де написано [DIV], я б набрав ім’я свого діва, чи не так?

20

Ні, використовуйте document.getElementById('id-of-the-div')замість[DIV]

— ThiefMaster

@JackStone: Це залежить від того, що ви маєте на увазі під "ім'ям" вашого діва. Якщо це змінна, на яку посилається div, то так.

1

Так якби мій дів був ім'ям testdiv, це було б document.getElementById('testdiv').style.visibility = 'hidden';?

124

Припустимо, ви не використовуєте бібліотеку, таку як 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насправді змусить діва все ще бути там, але бути "весь порожній" або "весь білий"

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 (і більше!).

— ThiefMaster
джерело

Я віддаю перевагу вашій відповіді, але, мабуть, є невелика корекція, яку ви повинні використовувати elem.style.display = 'none';

— Сауміл

Іноді для відображення елемента прийнятно призначити порожній рядок .

— Василевс

29

Ви можете використовувати 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';

— зелліо
джерело

div.style.visibility = falseне працює для мене в Chrome. І ця trueчастина, здається, працює більше випадково, тому що вона скидає майно (Хоча не моє поступлення)

— Pekka,

Ні, displayні visibilityбулеві властивості. Окрім цього, noneі їх blockпотрібно цитувати, оскільки вони є рядками ..

— ThiefMaster

неправильні значення для міток. Вони працюють зараз, і ні, я не збираюся це робити, це занадто спрощено.

— zellio

4

Ви можете використовувати функції DOM: setAttribute та removeAttribute. У наступному посиланні ви маєте приклад того, як ними користуватися.

setAttribute та removeAttribute функції

Швидкий перегляд:

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

— jarh1992
джерело

2

Чи можете ви покращити свою відповідь? З прикладом та поясненнями.

— Гаель Барбін

1

Ви можете використовувати opacityсхожий на, visibility але дозволяти плавно переходити та керувати іншими параметрами, такими як висота (для простоти фрагмента я прямо вкладаю js логіку в 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>

Розгорніть фрагмент

— Каміль Кийчевський
джерело

0

Використовуйте атрибут "прихований" елемента DOM:

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

— Андрій Гогуткін
джерело

0

Зробити невидимим за допомогою CSS

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

Зробити видимим за допомогою Javascript

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

— Діліп Кумар Чудхарі
джерело