Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   добавление стилей для множества элементов (https://javascript.ru/forum/misc/29068-dobavlenie-stilejj-dlya-mnozhestva-ehlementov.html)

??? 13.06.2012 18:40

добавление стилей для множества элементов
 
добрый вечер уважаемые форумчане.

опять столкнулся с проблемой, на этот раз более серьёзной:help:

вот есть стиль для картинки:

.img0 {
width: 990px;
height: 990px;
position: absolute;
left: 500px;
top: 250px;
}


в body я вставляю множество картинок:
<script type='text/javascript'><!--
   for (i = 99; i > -1; i--) {
    document.write("<img src='zr.gif' class='img"+i+"' id='img"+i+"'>");
   }
  --></script>


эта штука работает.
кто не заметил уточню: для каждой картинки я задаю уникальный id и class: img0 img1 img2 ... img99

для каждой картинки надо прописать стиль в том формате, который я описал выше.

у вас возникнет вопрос: "почему нельзя стиль прописать для всех картинок только один раз??"
ответ: "размер каждой картинки (width и height) должен быть в 10 раз меньше предыдущей."
тобишь
[b]
.img0 {
width: 990px;
height: 990px;
position: absolute;
left: 500px;
top: 250px;
}

.img0 {
width: 980px;
height: 980px;
position: absolute;
left: 500px;
top: 250px;
}

.img0 {
width: 970px;
height: 970px;
position: absolute;
left: 500px;
top: 250px;
}

...


.img0 {
width: 0px;
height: 0px;
position: absolute;
left: 500px;
top: 250px;
}


проблема у меня в том что я не знаю как прописать эти стили в цикле, а прописывать 99 стилей или даже больше вручную - нерационально....


заранее спасибо.

Amphiluke 13.06.2012 18:54

Код:

.img {
    position: absolute;
    left: 500px;
    top: 250px;
}

for (var i = 99; i > -1; i--) {
    document.write("<img src='zr.gif' class='img img"+i+"' id='img"+i+"' width='" + (i * 10) + "' height='" + (i * 10) + "'>");
}

cmd 13.06.2012 18:56

Во-первых, Вы не думали присвоить всем изображениям один класс?
Или поместить их в div с классом someclass? Тогда можно так:
.someclass img{
/* какие-то стили */
}


И через jQuery задача решается элементарно...

person 13.06.2012 19:22

Цитата:

Сообщение от Amphiluke (Сообщение 181196)
Я один это вижу? :-?

Нет.

100 картинок, каждая следующая в 10 раз меньше.
Вопрос, когда уйдем в отрицаловку?:lol:

dmitriymar 13.06.2012 19:27

Цитата:

Сообщение от person
100 картинок, каждая следующая в 10 раз меньше.Вопрос, когда уйдем в отрицаловку?

никогда. математику учи

??? 13.06.2012 19:52

Цитата:

Сообщение от cmd (Сообщение 181194)
Во-первых, Вы не думали присвоить всем изображениям один класс?
Или поместить их в div с классом someclass? Тогда можно так:
.someclass img{
/* какие-то стили */
}


И через jQuery задача решается элементарно...

.img0 {
width: 990px;
height: 990px;
position: absolute;
left: 500px;
top: 250px;
}

.img0 {
width: 980px;
height: 980px;
position: absolute;
left: 500px;
top: 250px;
}

.img0 {
width: 970px;
height: 970px;
position: absolute;
left: 500px;
top: 250px;
}

...


.img0 {
width: 0px;
height: 0px;
position: absolute;
left: 500px;
top: 250px;
}



Цитата:

Сообщение от dmitriymar (Сообщение 181205)
никогда. математику учи


+1:)

??? 13.06.2012 19:54

Цитата:

Сообщение от Amphiluke (Сообщение 181192)
Код:

.img {
    position: absolute;
    left: 500px;
    top: 250px;
}

for (var i = 99; i > -1; i--) {
    document.write("<img src='zr.gif' class='img img"+i+"' id='img"+i+"' width='" + (i * 10) + "' height='" + (i * 10) + "'>");
}

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

oneguy 14.06.2012 00:50

http://xpoint.ru/know-how/JavaScript/TablitsyiStiley
Тут есть небольшая статья о том, как динамически изменять таблицы стилей.


Часовой пояс GMT +3, время: 13:11.