непонятное поведение
почему вот такая конструкция, срабатывает только после 2 нажатия, после 1 ничего не происходит, а после 2-ого и все последующие разы работает как часы.
function viewInfo() { //выводит блок информации var div = document.getElementById('info'); if (div.style.display == 'none') div.style.display = 'block'; else div.style.display = 'none'; } <input type="submit" class="topSubmit" value="инфо" onClick="viewInfo()"> <div class="info" id="info"> <p onClick="closeInfo()"><img src="close.png"></p> </div> |
<div id="info">…</div> <script> alert(document.getElementById("info").style.display); </script> В style хранятся стили из соответствующего атрибута. Вычисленные стили получают следующим образом: var computedStyle = div.currentStyle || getComputedStyle(div, null); |
bpystep, разве так трудно привести пример по сути проблемы?
Тот код который вы привели работает. Как я полагаю, class="info" делает невидимым ваш div (этого описания вы как раз и не привели), а в том коде который вы привели div отображается. Как правильно направил вас Octane, если что-то не получается, нужно тестировать (правда, не всегда бывает очевидно как это делать), с тестом или без можно понять, почему приведённый вами код работает. А теперь по сути проблемы. Насколько я понимаю, проблема здесь заключается в том, что задание свойства display в тегах <style></style> не приводит к установке свойства div.style.display, хотя отображение корректное (почему так происходит сам хотел бы узнать), собственно установка этого свойства происходит после первого клика, поэтому дальше всё "работает как часы". Вариантом решения данной ситуации является задание этого свойства в атрибуте style самого элемента, либо явная его установка в каком либо месте кода. Код:
<script> |
Цитата:
Цитата:
а чтоб работало изначально,без вычисления внешних стилей условие достаточно поменять if (div.style.display == 'block') div.style.display = 'none'; else div.style.display = 'block'; |
Цитата:
Но пост вашей не очевидной для меня очевидности натолкнул на поиск: вот неплохая статья по этой теме http://javascript.ru/blog/Andrej-Par...cheniya-stilya |
Цитата:
|
Цитата:
Вообще, на мой взгляд, момент далеко не очевидный, и, как я думаю, большинство новичков (как и я до этой темы) не знают этой особенности (а лучше, чтобы её и не было), хотя, казалось бы, задал стилевые свойства в тегах <style></style>, а потом читай и записывай свойство style, ан нет. |
спасибо за разжеванный ответ.
вот код который недоложил: .info { display: none; width:250px; height:120px; background-color: #808080; border: 2px solid #ff0000; border-radius: 10px; position:fixed; margin-top: 100px; margin-left: 220px; z-index: 1000; padding: 10px; } |
Часовой пояс GMT +3, время: 19:23. |