Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 21.04.2012, 22:12
Профессор
Отправить личное сообщение для bpystep Посмотреть профиль Найти все сообщения от bpystep
 
Регистрация: 06.08.2010
Сообщений: 161

непонятное поведение
почему вот такая конструкция, срабатывает только после 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>
Ответить с цитированием
  #2 (permalink)  
Старый 21.04.2012, 22:20
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 10.07.2008
Сообщений: 3,873

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


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

Последний раз редактировалось Octane, 22.04.2012 в 16:23. Причина: пример с начальным значением
Ответить с цитированием
  #3 (permalink)  
Старый 22.04.2012, 12:04
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

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>
Ответить с цитированием
  #4 (permalink)  
Старый 22.04.2012, 12:14
х.з
Посмотреть профиль Найти все сообщения от dmitriymar
 
Регистрация: 21.11.2010
Сообщений: 4,588

Сообщение от 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';

Последний раз редактировалось dmitriymar, 22.04.2012 в 12:16.
Ответить с цитированием
  #5 (permalink)  
Старый 22.04.2012, 12:50
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

Сообщение от dmitriymar
ответ уже был дан,чего ещё узнавать?
Лично мне, например, не до конца понятны эти фразы и поэтому считаю, что они требуют расшифровки.
Но пост вашей не очевидной для меня очевидности натолкнул на поиск: вот неплохая статья по этой теме http://javascript.ru/blog/Andrej-Par...cheniya-stilya
Ответить с цитированием
  #6 (permalink)  
Старый 22.04.2012, 13:25
х.з
Посмотреть профиль Найти все сообщения от dmitriymar
 
Регистрация: 21.11.2010
Сообщений: 4,588

Сообщение от bes
Но пост вашей не очевидной для меня очевидности натолкнул на поиск: в
а логика простого ветвления не понятна,почему ещё раз скрывает ?
Ответить с цитированием
  #7 (permalink)  
Старый 22.04.2012, 16:04
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

Сообщение от dmitriymar
а логика простого ветвления не понятна,почему ещё раз скрывает ?
Вопрос-то был в том, почему при первом клике не отображает, хотя в стилях (заданных не в атрибуте style), указано display: none, а функция проверяет display == 'none', а не отображал он как раз потому, что стили, заданные в тегах <style></style>, как оказалось, не задают свойство style (а стили, заданные в атрибуте style, его как раз задают).
Вообще, на мой взгляд, момент далеко не очевидный, и, как я думаю, большинство новичков (как и я до этой темы) не знают этой особенности (а лучше, чтобы её и не было), хотя, казалось бы, задал стилевые свойства в тегах <style></style>, а потом читай и записывай свойство style, ан нет.
Ответить с цитированием
  #8 (permalink)  
Старый 01.05.2012, 21:42
Профессор
Отправить личное сообщение для bpystep Посмотреть профиль Найти все сообщения от bpystep
 
Регистрация: 06.08.2010
Сообщений: 161

спасибо за разжеванный ответ.
вот код который недоложил:
.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;
}
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
непонятное поведение скрипта bpystep Общие вопросы Javascript 2 02.04.2012 00:48
Странное поведение переменной mycoding Серверные языки и технологии 4 14.01.2011 19:18
Непонятное поведение полосы прокрутки в контейнере mouse_web Элементы интерфейса 10 27.09.2010 12:33
Отменить поведение по умолчанию bool Общие вопросы Javascript 3 06.03.2009 16:59
Непонятное поведение javascript Autosof Общие вопросы Javascript 4 04.09.2008 19:00