Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.06.2012, 18:40
??? ??? вне форума
Интересующийся
Отправить личное сообщение для ??? Посмотреть профиль Найти все сообщения от ???
 
Регистрация: 31.12.2011
Сообщений: 16

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

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

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

.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 стилей или даже больше вручную - нерационально....


заранее спасибо.
Ответить с цитированием
  #2 (permalink)  
Старый 13.06.2012, 18:54
Аватар для Amphiluke
   ☽
Отправить личное сообщение для Amphiluke Посмотреть профиль Найти все сообщения от Amphiluke
 
Регистрация: 07.01.2011
Сообщений: 254

Код:
.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) + "'>");
}
Ответить с цитированием
  #3 (permalink)  
Старый 13.06.2012, 18:56
Аватар для cmd
cmd cmd вне форума
Профессор
Отправить личное сообщение для cmd Посмотреть профиль Найти все сообщения от cmd
 
Регистрация: 19.03.2011
Сообщений: 177

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


И через jQuery задача решается элементарно...
__________________
Cogito, ergo sum
Ответить с цитированием
  #4 (permalink)  
Старый 13.06.2012, 19:22
Аспирант
Отправить личное сообщение для person Посмотреть профиль Найти все сообщения от person
 
Регистрация: 27.06.2010
Сообщений: 49

Сообщение от Amphiluke Посмотреть сообщение
Я один это вижу?
Нет.

100 картинок, каждая следующая в 10 раз меньше.
Вопрос, когда уйдем в отрицаловку?
Ответить с цитированием
  #5 (permalink)  
Старый 13.06.2012, 19:27
х.з
Посмотреть профиль Найти все сообщения от dmitriymar
 
Регистрация: 21.11.2010
Сообщений: 4,589

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

Последний раз редактировалось dmitriymar, 13.06.2012 в 19:33.
Ответить с цитированием
  #6 (permalink)  
Старый 13.06.2012, 19:52
??? ??? вне форума
Интересующийся
Отправить личное сообщение для ??? Посмотреть профиль Найти все сообщения от ???
 
Регистрация: 31.12.2011
Сообщений: 16

Сообщение от cmd Посмотреть сообщение
Во-первых, Вы не думали присвоить всем изображениям один класс?
Или поместить их в 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 Посмотреть сообщение
никогда. математику учи

+1
Ответить с цитированием
  #7 (permalink)  
Старый 13.06.2012, 19:54
??? ??? вне форума
Интересующийся
Отправить личное сообщение для ??? Посмотреть профиль Найти все сообщения от ???
 
Регистрация: 31.12.2011
Сообщений: 16

Сообщение от Amphiluke Посмотреть сообщение
Код:
.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) + "'>");
}
ваш вариант работает... правда что то не то..что то изменилось. ну и фиг с ним, это уже другой геморрой, который я решу сам.
спасибо))
Ответить с цитированием
  #8 (permalink)  
Старый 14.06.2012, 00:50
Профессор
Отправить личное сообщение для oneguy Посмотреть профиль Найти все сообщения от oneguy
 
Регистрация: 31.05.2012
Сообщений: 396

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Событие change для всех элементов exvion jQuery 2 25.01.2010 17:18
Нумерация элементов Idream Events/DOM/Window 2 14.01.2010 16:13
Использование одной функции для элементов с разными ID Ferroks Общие вопросы Javascript 10 11.09.2009 07:51
Модуль для работы с модулями JSprog Ваши сайты и скрипты 29 02.09.2009 12:31