Отправляет email-рассылки с помощью сервиса Sendsay

[prg] CSS + JavaScript: различия в обработки вариантов указания стиля

Здравствуйте.
Недавно при создании спойлера столкнулся со странной ситуацией. Мои знания в
области CSS крайне посредственны, поэтому надеюсь мне здесь это объяснят. :)
Идея была не оригинальна и заключалась в том, чтобы посредством JavaScript
динамически менять стиливое значение display между none и block.
Странность заключалась в том, что наблюдалась разное поведение скрипта в
зависимости от способа первоначального задания значения display.
Было рассмотрено два варианта:
1. присвоение контейнеру div, в котором находился текст спойлера, некого id,
а потом в подключённом файле CSS указание
#id_name { display: none }
2. Задание стиля div прямо в коде страницы, то есть
<div id="id_name" style="display: none">
В остальном всё было аналогично в обоих случаях.
Странность заключалась в следующем:
При первом варианте реализации, скрипт не срабатывал при первом нажатии на
кнопку, а начиная со второго, уже каждый раз чётко раскрывал/сворачивал
спойлер. При втором варианте всё работало штатно, то есть спойлер начинал
раскрываться/сворачиваться уже после первого нажатия.
Между строками с равно использовавшийся код JavaScript:
function spoiler(id_spol)
{
var obj = "";
if (document.getElementById) obj = document.getElementById(id_spol).style;
else if (document.all) obj = document.all[id_spol];
else if (document.layers) obj = document.layers[id_spol];
else return 1;
if (obj.display == "") obj.display = "none";
else if (obj.display != "none") obj.display = "none";
else obj.display = "block";
}
Взаимодействие со скриптом было реализовано посредством кнопки:
<input type="button" value="Спойлер" onClick="spoiler('id_name')">
В DOCTYPE декларировался HTML 4.0 Transitional.
Проблема носила кроссбраузерный характер, по крайней мере, на уровне движков
IE, FF и Chrome.
В принципе всё было решено реализацией через второй вариант, но остался
осадок неудовлетворённости.
Если у кого мысли, почему присутствовали такие отличия при разных вариантах
указания стиля?
Успехов. Никита.

Ответить   Fri, 16 Mar 2012 17:11:44 +0400 (#2402757)

 

Ответы:

Vande omentaina, Nikita!

Я, честно говоря, чего-то не понимаю). Вот этим ты что делаешь?

Ответить   Fri, 16 Mar 2012 17:09:04 +0200 (#2403031)

 

Приветствую всех.

Проверьте css на валидность.

Кроме того, парсер css в браузере может работать до первой ошибки, а потом прекращать
разбор, но все ранее проанализированные валидные конструкции будут применены
к документу.
То есть нельзя ориентироваться на то, что какие-то конструкции из css работают
нормально, так как они могут располагаться до строки, в которой находится ошибка.

Успехов. Анатолий.

Ответить   "i_chay" Fri, 16 Mar 2012 23:03:49 +0400 (#2403052)

 

Здравствуйте, i_chay.

Обижаете, Анатолий Николаевич, всё на уровне. :) Вы же сами меня несколько
лет назад наставляли читать web-спецификации.
Вот наглядный пример:
http://dl.dropbox.com/u/44439456/spoilers.html
У меня первый спойлер начинает работать только после второго клика, а
второй - сразу.
Кстати, буквально сегодня с удивлением заметил, что CSS-валидатор вдруг стал
ругаться на числовые значения font-weight, хотя раньше их принимал без
проблем. Вот и верь после этого...
Успехов. Никита.

Ответить   Sat, 17 Mar 2012 00:51:47 +0400 (#2403158)

 

Приветствую всех.

Можете изменить логику вот этой ветки
if (obj.display == "") obj.display = "none";
Вы ведь ее определили исключительно волюнтаристским путем, т.е. вопреки моим
советам, не отыскав для этого ссылки на соответствующий документ, правда? :-)

Дело в том, что объект DOM style, к которому мы получаем доступ через свойство
style не то же самое, что css (несмотря на некоторое сходство некоторых свойств
этого объекта и некоторых атрибутов css).
То, что изменение свойств объекта DOM Style влияет на внешний вид HTML документа
так же, как изменение некоторых стилевых атрибутов css, тоже не есть повод думать
о них, как об одних и тех же сущностях.
И я не нашёл никаких подтверждений, что объект DOM Style должен быть динамическим
отражением исходной css.
А вот атрибут style конкретного элемента конкретного HTML-документа влияет на
объект DOM Style этого элемента.

Успехов. Анатолий.

Ответить   "i_chay" Sat, 17 Mar 2012 02:35:38 +0400 (#2403195)