VPF::Присвоить стили через раз - Форум программистов

Ferromarron

Дата 25.3.2007, 18:22 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 35
Регистрация: 4.3.2007

Репутация: нет
Всего: нет

Есть несколько блоков с одинаковым классом:

Код


<div id="main">
   <div class="num">......</div>
   <div class="num">......</div>
   <div class="num">......</div>
   <div class="num">......</div>
   <div class="num">......</div>
   <div class="num">......</div>
   <div class="num">......</div>
</div>

Как можно присвоить стиль (например, цвет фона) всем нечетным блокам с классом num?

Mymik

Дата 25.3.2007, 18:51 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 1474
Регистрация: 12.5.2006
Где: Lamer-центер

Репутация: 11
Всего: 78

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

Код


function setBackground()
{
    divMain = document.getElementById("main");
    y = 1;
    for(i = 0; i < divMain.childNodes.length; i++)
        if(divMain.childNodes[i].className == "num")
        {
            if(y % 2 == 0)
                 divMain.childNodes[i].style.background = "#123456";
            else
                divMain.childNodes[i].style.background = "#654321";
            y++;
        }
}

Это сообщение отредактировал(а) Mymik - 25.3.2007, 18:52

--------------------

ICQ ::            857-857
E-mail ::         mymik[at]inbox[dot]ru
HomaPage ::  http://localhost/

:to_become_senile  :this

Ferromarron

Дата 25.3.2007, 23:43 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 35
Регистрация: 4.3.2007

Репутация: нет
Всего: нет

Mymik, спасибо очередной раз smile

SelenIT

Дата 25.3.2007, 23:57 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 49
Всего: 401

Цитата(Mymik @ 25.3.2007, 18:51

)

divMain.childNodes

Имхо, лучше все-таки divMain.getElementsByTagName('div') - по той же причине, что и в недавней теме с ячейками таблицы (текстовые ноды в Gecko, чтоб им пусто было)...

А вообще в CSS3 есть специальный селектор nth-child для создания таких "зебр". Вот только когда все актуальные браузеры станут его поддерживать...

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

Ferromarron

Дата 26.3.2007, 20:54 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 35
Регистрация: 4.3.2007

Репутация: нет
Всего: нет

Цитата(SelenIT @ 25.3.2007, 23:57

)

текстовые ноды

А что это за зверь, и что с ними не так?

Mymik

Дата 27.3.2007, 18:33 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 1474
Регистрация: 12.5.2006
Где: Lamer-центер

Репутация: 11
Всего: 78

Ferromarron, в Gecko браузерах пробелы(или любой текст) между тэгами считаются TextNode'ами, а у них нет такого свойства(или прототипа (не знаю как правильно, кажись прототипа)) как className или чего-либо еще. Потому лучше будет использовать несколько видоизмененную функцию

Код


function setBackground()
{
    divMain = document.getElementById("main");
    y = 1;
    divCollection = divMain.getElementsByTagName("div");
    for(i = 0; i < divCollection.length; i++)
        if(divCollection[i].className == "num")
        {
            if(y % 2 == 0)
                 divCollection[i].style.background = "#123456";
            else
                divCollection[i].style.background = "#654321";
            y++;
        }
}

--------------------

ICQ ::            857-857
E-mail ::         mymik[at]inbox[dot]ru
HomaPage ::  http://localhost/

:to_become_senile  :this

SelenIT

Дата 27.3.2007, 18:43 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 49
Всего: 401

Цитата(Mymik @ 27.3.2007, 18:33

)

у них нет такого свойства(или прототипа (не знаю как правильно, кажись прототипа))

Правильно всё-таки свойства smile

Прототип - это немного не то... это что-то вроде дальнего родственника классов в обычных ОО-языках, но не класс, а тоже объект... в общем, в двух словах не скажешь, тут в соответствующем прикрепленном топике лучше написано smile

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

AKS

Дата 27.3.2007, 20:36 (ссылка)

(нет голосов)

Загрузка ...

Участник форума

Профиль
Группа: Участник
Сообщений: 725
Регистрация: 20.9.2006

Репутация: 27
Всего: 52

Цитата(SelenIT @ 25.3.2007, 23:57

)

текстовые ноды в Gecko, чтоб им пусто было

А что нам Node.TEXT_NODE боятся что-ли? smile

Нам ведь, как пьяному - море по-колено! Мы и у них запросто "потребуем" имя класса и ничего они нам не сделают:

Код


function makeZebra(odd, even) {
    var parent = document.getElementById('main'),
        childs = parent.childNodes,
        len = childs.length,
        bool = true,
        tmp;
    for (var i = 0; i < len; i++) {
        tmp = parent.childNodes[i];
        if (tmp.className === 'num') {
            tmp.style.background = (bool = !bool)
                                   ? even
                                   : odd;
        }
    }
}

Почему работает в Gecko?

Это сообщение отредактировал(а) AKS - 27.3.2007, 20:44

SelenIT

Дата 27.3.2007, 22:37 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 49
Всего: 401

AKS, хм... в принципе логично - при чтении несуществующего св-ва ведь просто безобидный null получится, который вполне можно сравнить со строкой... Это я на ошибку нарывался, когда нужен был не className, а style с его "подсвойствами" - у null-а таковых очевидно не было. Вот с той поры у меня и "остался осадок" не доверять гекковским межтеговым пробелам...

Большое спасибо за своевременное замечание!

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »