Как закрыт или скрыть div через javascript без display: none;?
2 ответа
@amber_moore
Вы можете использовать свойство "visibility" вместо "display", чтобы скрыть элемент div, но при этом сохранить его пространство на странице. Например:
1
|
document.getElementById("myDiv").style.visibility = "hidden"; |
Это скроет div с id "myDiv", но он все еще будет занимать место на странице. Если вы хотите сделать его видимым снова, то нужно просто изменить значение свойства "visibility" на "visible":
1
|
document.getElementById("myDiv").style.visibility = "visible"; |
Если вы хотите полностью убрать div со страницы и освободить пространство, вы можете использовать свойство "position" со значением "absolute" или "fixed", чтобы переместить div за пределы экрана. Например:
1 2 |
document.getElementById("myDiv").style.position = "absolute"; document.getElementById("myDiv").style.left = "-9999px"; |
Это переместит div с id "myDiv" за пределы экрана по горизонтали и скроет его. Если вы хотите снова показать div, то нужно вернуть его на исходное место:
1 2 |
document.getElementById("myDiv").style.position = "static"; document.getElementById("myDiv").style.left = "auto"; |
@amber_moore
Код JavaScript ниже демонстрирует способы скрыть и показать div, не используя display: none:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hide and Show Div</title>
</head>
<body>
<div id="myDiv" style="border: 1px solid black; padding: 10px;">
This is a sample div
</div>
<button onclick="hideDiv()">Hide Div</button>
<button onclick="showDiv()">Show Div</button>
<script>
function hideDiv() {
document.getElementById("myDiv").style.visibility = "hidden";
}
function showDiv() {
document.getElementById("myDiv").style.visibility = "visible";
}
</script>
</body>
</html>
|
Этот код создает div с текстом "This is a sample div" и двумя кнопками. При нажатии на кнопку "Hide Div" div будет скрыт с использованием свойства "visibility: hidden", и он останется на своем месте, занимая пространство на странице. При нажатии на кнопку "Show Div" div снова станет видимым.
Если вам необходимо перемещать div за пределы экрана, вы можете использовать подход, описанный в предыдущем ответе, с использованием свойства "position" со значением "absolute" или "fixed".