добавление стилей для множества элементов
добрый вечер уважаемые форумчане.
опять столкнулся с проблемой, на этот раз более серьёзной: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 стилей или даже больше вручную - нерационально.... заранее спасибо. |
Код:
.img { 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) + "'>"); } |
Во-первых, Вы не думали присвоить всем изображениям один класс?
Или поместить их в div с классом someclass? Тогда можно так: .someclass img{ /* какие-то стили */ } И через jQuery задача решается элементарно... |
Цитата:
100 картинок, каждая следующая в 10 раз меньше. Вопрос, когда уйдем в отрицаловку?:lol: |
Цитата:
|
Цитата:
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; } Цитата:
+1:) |
Цитата:
спасибо)) |
http://xpoint.ru/know-how/JavaScript/TablitsyiStiley
Тут есть небольшая статья о том, как динамически изменять таблицы стилей. |
Часовой пояс GMT +3, время: 00:50. |