Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   непонятное поведение (https://javascript.ru/forum/misc/27699-neponyatnoe-povedenie.html)

bpystep 21.04.2012 22:12

непонятное поведение
 
почему вот такая конструкция, срабатывает только после 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>

Octane 21.04.2012 22:20

<div id="info">…</div>
<script>
alert(document.getElementById("info").style.display);
</script>


В style хранятся стили из соответствующего атрибута. Вычисленные стили получают следующим образом:
var computedStyle = div.currentStyle || getComputedStyle(div, null);

bes 22.04.2012 12:04

bpystep, разве так трудно привести пример по сути проблемы?
Тот код который вы привели работает.
Как я полагаю, class="info" делает невидимым ваш div (этого описания вы как раз и не привели), а в том коде который вы привели div отображается.
Как правильно направил вас Octane, если что-то не получается, нужно тестировать (правда, не всегда бывает очевидно как это делать), с тестом или без можно понять, почему приведённый вами код работает.

А теперь по сути проблемы.
Насколько я понимаю, проблема здесь заключается в том, что задание свойства display в тегах <style></style> не приводит к установке свойства div.style.display, хотя отображение корректное (почему так происходит сам хотел бы узнать), собственно установка этого свойства происходит после первого клика, поэтому дальше всё "работает как часы".
Вариантом решения данной ситуации является задание этого свойства в атрибуте style самого элемента, либо явная его установка в каком либо месте кода.

Код:

<script>
function viewInfo() {
  var div = document.getElementById('info');
  if (div.style.display == 'none')
    div.style.display = 'block';
  else
    div.style.display = 'none';
}
</script>

<button onclick="viewInfo()">info</button>
<div id="info" style="display: none; background: grey">info</div>


dmitriymar 22.04.2012 12:14

Цитата:

Сообщение от bes
Насколько я понимаю, проблема здесь заключается в том, что задание свойства display в тегах <style></style> не приводит к установке свойства div.style.display, хотя отображение корректное (почему так происходит сам хотел бы узнать), собственно установка этого свойства происходит после первого клика, поэтому дальше всё "работает как часы".

Цитата:

Сообщение от Octane
В style хранятся стили из соответствующего атрибута. Вычисленные стили получают следующим образом:
var computedStyle = div.currentStyle || getComputedStyle(div, null);

ответ уже был дан,чего ещё узнавать?
а чтоб работало изначально,без вычисления внешних стилей условие достаточно поменять
if (div.style.display == 'block') 
    div.style.display = 'none';
  else 
    div.style.display = 'block';

bes 22.04.2012 12:50

Цитата:

Сообщение от dmitriymar
ответ уже был дан,чего ещё узнавать?

Лично мне, например, не до конца понятны эти фразы и поэтому считаю, что они требуют расшифровки.
Но пост вашей не очевидной для меня очевидности натолкнул на поиск: вот неплохая статья по этой теме http://javascript.ru/blog/Andrej-Par...cheniya-stilya

dmitriymar 22.04.2012 13:25

Цитата:

Сообщение от bes
Но пост вашей не очевидной для меня очевидности натолкнул на поиск: в

а логика простого ветвления не понятна,почему ещё раз скрывает ?

bes 22.04.2012 16:04

Цитата:

Сообщение от dmitriymar
а логика простого ветвления не понятна,почему ещё раз скрывает ?

Вопрос-то был в том, почему при первом клике не отображает, хотя в стилях (заданных не в атрибуте style), указано display: none, а функция проверяет display == 'none', а не отображал он как раз потому, что стили, заданные в тегах <style></style>, как оказалось, не задают свойство style (а стили, заданные в атрибуте style, его как раз задают).
Вообще, на мой взгляд, момент далеко не очевидный, и, как я думаю, большинство новичков (как и я до этой темы) не знают этой особенности (а лучше, чтобы её и не было), хотя, казалось бы, задал стилевые свойства в тегах <style></style>, а потом читай и записывай свойство style, ан нет.

bpystep 01.05.2012 21:42

спасибо за разжеванный ответ.
вот код который недоложил:
.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, время: 20:16.