CSS в помощь JavaScript программисту

[Kavu]

о оформлении - Можно

Аллюзийно-поли.....

разбить на несколько строчек? а то залезает в соседний блок (Safari 3.0.4 Win)...

[dfitiskin]

done

[AlexeyTokar]

а еще можно воспользоваться сторонней библиотекой (mootools например), которая умеет делать toggleClass [http://docs.mootools.net/Native/Element.js#Element.toggleClass], что позволит переписать последний пример так:

//теперь эта одна функция вместо тех двух
function toggle(nodeId) {
   if (node = $(nodeId)) {
      node.toggleClass('hidden');
   }
}


и к тому же вешать события методом прописывания onclick не кошерно ИМХО. можно воспользоваться тем же инструментом и довесить события через .addEvent() - более прозрачное разделение логики от представления

[dfitiskin]

Да, почти во всех библиотеках подобный метод есть для работы с классами. Но тут в общем подход. И если бы я сделал через addEvent это бы отвлекло от сути.

[AlexeyTokar]

я больше вел к тому, что надо приучать людей к использованию более высокоуровневые библиотеки, чем использовать низкоуровневый JS. Во-первых это дает больше кроссбраузерности, во-вторых больше возможностей (и собвстенно простоты действий), ну и к чему писать сайты на ассемблере под CGI, если есть PHP и иже с ним? :)

А касательно самой подачи материала — решение вопроса с граблями отображения для многих начинающих будет полезным :) спасибо

[dfitiskin]

Дело в том что я как раз приучивать к библиотеке то и не хочу. Моя задача показать грабли, и подход. А дальше уж каждый сам для себя решит как это реализовывать.

[lahmatiy]

а что вам помешало вместо
node.style.display = 'block';
писать
node.style.display = '';
?

[dfitiskin]

неочивидность данного решения. но согласен - пример вмеру исскуственный.

[prop]

В вашем примере неправильно использовать
node.style.display = 'block';,
т.к. span, по умолчанию, inline-элемент.
Поэтому решение, которое предложил lahmatiy, вполне очевидно.

[dfitiskin]

возможно, спорить не буду.
но я хотел показать способ как вообще не думать о таких вещах.

[dyakov]

Очень часто бывает что инлайновым элементам присваивается свойство display:block;
поэтому это очевидное решение уже не будет решением :)

[prop]

Если оно выставляется при помощи глобальных таблиц, то это решение никуда не денется. Причин, по которым инлайн-элементам нужно выставлять 'display:block' через element.style.display или через атрибут style я с ходу придумать не могу. Если подскажете, буду признателен.

[Zitrix]

el.currentStyle[styleName] ие
document.defaultView.getComputedStyle(el, null)[styleName] неие
вместо null строку псевдокласса можно поставить, судя по спецификации

[Zitrix]

если я суть вопроса понял

[dfitiskin]

ну вот, а вы говорите очевидно :)

[ast]

Надо писать node.style.display = 'inline';

[prop]

а если вместо span будет p ?

[ast]

Если элемент инлайновый:
http://www.w3.org/TR/2003/WD-xhtml2-2003…
ставим inline

Если блочный, ставим конечно block:
http://www.w3.org/TR/2003/WD-xhtml2-2003…

Соответственное если хочешь добиться блокового поведения от инлайнового элемента, ставишь блок и т. п.

[ast]

поправлюсь "Соответственно"

[prop]

В вашей реализации придётся где-то хранить для каждого элемента нужное значение свойства display. Тут же на помощь приходят глобальные таблицы стилей.

[ast]

Причем здесь реализация? CSS надо хранить в .css, а не в JavaScript'e.
Я про то что не надо писать ...style.display = ''; рассчитывая что браузер все правильно поймет.

[prop]

А почему браузер должен понять меня неправильно, если я напишу element.style.display=''; ?

[ast]

В спецификации это как-то описано?
Если нет, то каким образом будет определятся display для элемента будет решать проектировщик каждого конкретного браузера.

[dfitiskin]

ну насколько я заметил obj.style - это эквивалент параметру style у соответсвуюещего тега.

т.е. если мы ставим obj.style.display='none' - то тем самым перекрываем то что задано к примеру в таблице стилей. а когда obj.style.display='' - это фактически удаляет display из style и решение приимается уже по тому что задано в css файле или для узла по умолчанию

[ast]

Если смотреть в Firebug'e, то да, но в полне возможно, что в IE это происходит как-то по-другому.

И опять же, если это ни где не описано, то разработчик браузера может сделать как хочет.
Если хочется сделать более менее надежный сайт, то руководствоваться аргументами типа "насколько я заметил" не стоит.

[dfitiskin]

насколько вы могли заметить из поста, всячески стараюсь этим не руководствоваться аргументами типа "насколько я заметил"

просто у вас тут такой активный спор разыгрался, что и я решил вставить свои 5 копеек

[prop]

как я уже писал выше, свойство будет определяться из глобальных таблиц стилей.

[arestov]

Теперь остается только назначить этот класс нужному узлу, и он исчезнет с экрана. Убрав этот класс, он без проблем вернется в строй.

атрибут class может иметь несколько классов, они перечесляются через пробел, таким образом можно использовать код


function hide(nodeId){
...
node.className += ' hidden';
...}

function show(nodeId){
...
node.className=node.className.replace(' hidden', '');
(надо проверить- может сработает node.className -= ' hidden')
...}


[lahmatiy]

С каких пор операция вычитания работает для строк? :) В случае использования данной операции ваши операнды приведутся к числами, а результатом операции будет NaN.

[arestov]

если вы говорите о "node.className -= ' hidden'", то я и сам поставил под сомнение данный код, а остальное прекрасно работает

[gro]

А если там класс hidden2?

[Zitrix]

если hidden первый класс тоже жопа (не тримит className только ие)

[ekim]

А зачем две отдельных функции? Я использую универсальную
function toggle(obj) {
var el = document.getElementById(obj);
if (el.style.display != 'none') {
el.style.display = 'none';
}
else {
el.style.display = '';
}
}

[dfitiskin]

для наглядности примера я выбрал реализацию самую простую для понимания. что может быть проще скрыть/показать.

[arestov]

поставте в стиле display:block для вашего obj
затем сделайте alert(document.getElementById(obj).style.display;) и вы увидите что там вовсе не block

таким образом значение по умолчанию должно быть none. может кто-то знает как получить актуальное значение ?

[YongLing]

проще:

function toggle(obj) {
var el=document.getElementById(obj);
el.style.display = (el.style.display=='none') ? 'block' : 'none';
}

[dfitiskin]

простота исчесляется вовсе не количеством строк
а вообще в данном случае как реализовано включение выключени не принципиально. важно то что внутри.

[noise]

а если значение передаётся через class, а не style ?

если уж на то пошло, то тогда offsetWidth.

[ast]

Видимо ты рассчитываешь, что пользуются только IE?

[TNK]

блин. Передом мной сейчас встала проблема: как получить свойство описанное на в style тэга а через class?

[rsa]

Тут удобство даже не в избежании подобных камней. А скорее в правильном подходе. Каждый элемент на странице может быть в нескольких состояниях (показан, не показан, сфокусирован, в режиме редактирования). Более того, состояние родительских элементов может влиять на его детей. Все эти взаимосвязи легко ложатся на язык css и поддерживаются всеми браузерами. И чем каждый раз в яваскрипте определять, какая у нас новая конфигурация и что изменилось по сравнению с текущей, проще прописать нужные правила в css и оперировать в терминах классов.

[dfitiskin]

в точку :)

[mente]

вопрос перекладывания задач с программиста на верстальщика и наоборот можно вынести в отдельную тему имхо :)

[dfitiskin]

тут скорее про разделение логики и представления, чем про то как спихнуть работу кому-то другому :)

[ast]

То есть когда пишешь node.style.display = 'block'; отделяется логика от представления?

[dfitiskin]

как раз нет
а вот когда пишешь
node.className = 'hidden';
вот тогда отделяется.

[ast]

Ну если это делать так:
Middle = "</head><body><img src='" + url;
End = "' onClick='window.close()' alt='Кликните на изображении чтобы закрыть окно' class='zoom' /></body></html>";
(http://www.ibl.su/scripts/common/ewin.js)

Могу лишь пожелать дальнейших успехов в освоении JavaScript'a и CSS :-)

[dfitiskin]

польстило что вы просмотриваете работы нашей студии. а какое отношение это имеет к теме поста?

[ast]

Если посмотреть на мой предыдущий коммент и кусок яваскрипта с сайта вашей студии, можно понять какой уровень "программирования" в целом.

[dfitiskin]

делать выводы вам никто не запрещает

[necrosis]

Тривиальная задача - при наведении мыши изменить картинку - если просто переписывать каждый раз ее src, то она (картинка) будет подгружатся каждый раз, в то время как если менять ее className - этого не происходит в большенстве браузеров. Так что это скорее не помощь, а необходимость.

[Zitrix]

Если менять className, то src не меняется. Да, есть над чем подумать.

[w3coder]

1. достаточно очевидная, на мой взгляд, очень правильная идея

2. домашнее задание :)

> Остается, правда, еще одна проблема — не учитывается случай,
> при котором узел уже имеет какой-либо класс. Попробуйте решить
> эту проблему самостоятельно.

node.className += ' hidden'; // назначили класс

node.className = node.className.replace(' hidden', ''); // убрали класс

3. проблему с display, что показывать inline или block, или еще что то, можно решить, например, воспользовавшись свойством visibility, а чтобы места пустое место не показывалось добавить position: absolute;, а потом менять на relative, но можно так же нарваться на нечаянное изменение уже заданного другого position

[Zitrix]

А как аккуратно расставлены скобочки! Жду 18 параграфов текста, в которых расписано использование сокращенной конструкции условно оператора. И еще 18 параграфов с описанием понятия «составной оператор».

[dfitiskin]

я тоже, но мы к этому всячески стремимся

[sab0tazh]

Функции нужно изменить так :

function hide(nodeId)
{
var node = document.getElementById(nodeId);
if (node)
{
node.style.visibility = 'hidden ';
}
}

function show(nodeId)
{
var node = document.getElementById(nodeId);
if (node)
{
node.style.visibility = 'visible';
}
}

и все заработает!

[arestov]

у visibility другие свойства. так просто нельзя поменять display на visibility

[Delka]

очень хорошо