dfitiskin Feb 29 2008 at 12:21

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

3 min

14K

JavaScript*

+18

Comments 62

Kavu Feb 29 2008 at 13:05

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

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

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

dfitiskin Feb 29 2008 at 13:14

done

AlexeyTokar Feb 29 2008 at 13:10

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

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

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

-3

dfitiskin Feb 29 2008 at 13:13

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

AlexeyTokar Feb 29 2008 at 13:19

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

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

-4

dfitiskin Feb 29 2008 at 13:25

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

lahmatiy Feb 29 2008 at 13:22

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

dfitiskin Feb 29 2008 at 13:27

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

prop Feb 29 2008 at 13:34

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

dfitiskin Feb 29 2008 at 13:38

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

dyakov Feb 29 2008 at 13:41

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

prop Feb 29 2008 at 14:02

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

Zitrix Feb 29 2008 at 22:03

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

Zitrix Feb 29 2008 at 22:05

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

dfitiskin Feb 29 2008 at 14:35

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

ast Feb 29 2008 at 14:30

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

prop Feb 29 2008 at 14:40

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

ast Feb 29 2008 at 17:00

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

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

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

ast Feb 29 2008 at 17:04

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

prop Feb 29 2008 at 17:12

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

ast Feb 29 2008 at 17:15

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

-2

prop Feb 29 2008 at 17:18

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

ast Feb 29 2008 at 17:49

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

dfitiskin Feb 29 2008 at 17:53

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

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

ast Feb 29 2008 at 18:06

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

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

dfitiskin Feb 29 2008 at 18:15

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

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

prop Feb 29 2008 at 18:01

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

arestov Feb 29 2008 at 14:01

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

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



function hide(nodeId){

...

        node.className += ' hidden';

...}

 

function show(nodeId){

...

        node.className=node.className.replace(' hidden', '');

(надо проверить- может сработает  node.className -= ' hidden')

...}

-1

lahmatiy Feb 29 2008 at 14:51

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

arestov Feb 29 2008 at 15:29

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

gro Feb 29 2008 at 16:01

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

Zitrix Feb 29 2008 at 22:01

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

ekim Feb 29 2008 at 14:08

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

dfitiskin Feb 29 2008 at 14:15

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

arestov Feb 29 2008 at 15:49

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

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

YongLing Feb 29 2008 at 15:25

проще:

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

dfitiskin Feb 29 2008 at 15:36

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

noise Feb 29 2008 at 15:26

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

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

UFO just landed and posted this here

ast Feb 29 2008 at 17:11

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

UFO just landed and posted this here

TNK Apr 25 2008 at 23:08

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

rsa Feb 29 2008 at 16:47

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

dfitiskin Feb 29 2008 at 16:55

в точку :)

UFO just landed and posted this here

mente Feb 29 2008 at 17:52

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

dfitiskin Feb 29 2008 at 17:56

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

ast Feb 29 2008 at 23:19

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

-2

dfitiskin Mar 3 2008 at 10:38

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

ast Mar 3 2008 at 19:15

Ну если это делать так:
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 :-)

-2

dfitiskin Mar 3 2008 at 19:25

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

ast Mar 3 2008 at 19:38

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

dfitiskin Mar 3 2008 at 19:47

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

necrosis Feb 29 2008 at 18:55

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

Zitrix Feb 29 2008 at 21:57

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

w3coder Feb 29 2008 at 20:40

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

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

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

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

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

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

Zitrix Feb 29 2008 at 21:54

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

UFO just landed and posted this here

dfitiskin Mar 3 2008 at 10:39

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

sab0tazh Mar 1 2008 at 11:41

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

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 Mar 1 2008 at 14:09

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

Delka Mar 3 2008 at 12:11

очень хорошо