★ Свойства visibility и display
★ Блочные и строчные элементы
★ Свойство visibility
★ Свойство display ★ Как работают свойства visibility и display
★ В чем отличия работы кодов: visibility: hidden и display: none
★ Варианты записи кода скрытия с display='none'
★ Скрытие и отображение изображений
★ Функция "показать-скрыть"
Свойства visibility и display
Допустим, у вас есть элемент, который вы хотите временно спрятать. Что делать: поменять значение свойства visibility на hidden или лучше назначить свойству display значение none.
В чем заключается разница? Как оставшаяся часть страницы будет реагировать на элемент, который, то видно, то нет?
На первый взгляд может показаться, что CSS свойства visibility и display выполняют одну и ту же функцию. Для делающих первые шаги в овладении JavaScript поверхностная схожесть свойств visibility и display может сбить с толку. Чтобы разобраться в различии этих свойств,
чтобы понимать, почему некоторые CSS свойства будут работать с одним элементом и не будут работать с другим, необходимо сначала усвоить различие в понятиях «блочный » и «строчный» элементы.
Блочные и строчные элементы
Большинство элементов в CSS классифицируются как блочные (block) или строчные (inline), и это влияет на то, как эти элементы будут отображаться по умолчанию на веб-странице.
Блочные элементы всегда начинаются с новой строки и занимают всю доступную ширину, если ширина для элемента не была установлена. Блочный элемент занимает всю строку, на этой же строке не может быть другого элемента.
Такие элементы могут иметь внешние и внутренние отступы, растягиваются по высоте под свое содержимое, не выравниваются свойством vertical-align. Примеры блочных элементов: <h1>, <p>, <div>.
Строчные элемент могут соседствовать с другими строчными элементами на одной строке, они могут быть выровнены с помощью свойства vertical-align. Но такие элементы не могут растягиваться по высоте, игнорируют верхний и
нижний внешний отступ, если он применен, такие элементы игнорируют свойства height и width. Существует возможность сделать блочным если установить для свойства display значение block. Примеры строчных элементов: <span>, <a>.
Зная, какие значения свойств visibility и display, устанавливаются по умолчанию для блочного или строчного элементов, можно получить ответ на вопрос: можно или нельзя изменять это значение по необходимости.
Значение по умолчанию для свойства CSS visibility – visible, для свойства display – block.
Свойство visibility
Свойство visibility имеет значения: видимый (visible) и спрятанный (hidden).
Имена свойств говорят сами за себя: видимые элементы можно увидеть, а спрятанные нет. Важно отметить, что спрятанные элементы продолжают занимать свое место.
Синтаксис visibility:
visibility: visible (отображать) | hidden(сделать прозрачным).
Свойство display
Свойство display имеет значения: видимый (block) и удаленный из окна браузера (none).
Синтаксис display:
display: block (отображать) | none (удалить элемент).
Как работают свойства visibility и display
И visibility, и display прячут элемент, но делают это по-своему. В случае, если вам нужно, чтобы спрятанный элемент продолжал занимать определенное пространство, - используем visibility. При использовании свойства display элемент перестает занимать пространство. Его место занимают нижележащие в окне браузера элементы, которые “подпрыгивают” вверх, занимая освободившееся место. файл
На практике чаще используют display, чтобы на месте убираемого элемента не оставалось пустого пространства. ПОСМОТРИТЕ, как
работают свойства visibility и display.
В чем отличия работы кодов: visibility: hidden и display: none
Свойство visibility: hidden — скрывает от показа блок с этим свойством (вместе с фоном и границей), т.е. блок становится полностью прозрачным. Свойство visibility:hidden означает, что элемент есть на странице, просто он невидимый, но место занимает. Получается как-бы промежуток, равный его размерам.
display: none — блок с этим свойством удаляется из показа вообще.
Таким образом, он не будет занимать на экране места, и между предыдущими перед ним элементами и следующим за ним не образуется никакого промежутка.
Варианты записи кода скрытия с display='none'
При выводе картинок с помощью innerHTML можно использовать несколько вариантов записи кода скрытия изображения. Пусть картинка выведена в скрипте по коду
im="<img SRC='531.jpg' width=300px height=200px>"
tim.innerHTML=im
Здесь tim - идентификатор, который должен быть записан перед скриптом. Тогда ее можно скрыть с помощью кода
tim.innerHTML=display='none'
Код работает и в том случае, если из кавычек убрать none.
Другой вариант кода скрытия
tim.style.display ='none'
В этом случае из кавычек убирать none нельзя.
Можно вообще обойтись без display='none', используя код
tim.innerHTML=''
Чаще всего свойства visibility и display используются для того, чтобы либо вывести изображение на экран браузера, либо убрать его с экрана.
ПОСМОТРИТЕ, что
при этом происходит на экране. Вывод
изображения осуществляется по коду
document.getElementById(x).style.display ='block'
При этом код само изображения должен быть
записан в body <div id="mypict" style="display: none; margin-top:-220">
<img src="59.jpg" width=375 hight=250>
</div>
Чтобы изображение не появлялось на экране при загрузке в его коде пишем
style="display: none" Вообще говоря, вывести изображение можно, не записывая его код в body. Делается это с помощью
свойства innerHTML:
s2="<p align=center><img SRC='18.jpg' width=350 height=250></p>"
tam.innerHTML=s2
Скрыть это изображение (display="none") также можно с помощью
свойства innerHTML:
tam.innerHTML='<style.display="none">'
Здесь tam - идентификатор, который должен быть записан до скрипта. ПОСМОТРИТЕ, как
как это выглядит на экране.
Функция "показать скрыть"
Свойства: display = "block" и display = "none" использует функция под названием "показать скрыть", назначение которой либо скрывать, либо
отображать изображения [в скрипте обозначена как SH()]:
<HTML>
<HEAD>
<TITLE>tip8</TITLE>
<script>
function WW1()
SH('det'); return false
function WW()
{
SH('det'); return true
}
function SH(obj_id)
{
if(doc.style.display == "none") doc.style.display = "block";
else doc.style.display = "none"
}
</script>
</head>
<body>
<div id="det" style="display: none;"><p align=center><img SRC='530.jpg' width=450 height=300></div>
<body bgcolor="00ff00">
</body>
</html>
ПОСМОТРИ
ПРИМЕР
Для начинающих скрипт может показаться сложноватым, поэтому приведу скрипт с более понятной логикой
<HTML>
<HEAD>
<TITLE>myf</TITLE>
<script>
var x=0
function SHM()
{
var elem=document.getElementById('detm')
if (x==0)
{elem.style.display="block"
x=1}
else
{elem.style.display='none'
x=0}
}
document.addEventListener("click",SHM)
</script>
</head>
<body>
<div id="detm" style="display: none;">
<p align=center><img SRC='531.jpg' width=450 height=300</div>
</body>
</html>
