Массово поменять свойства блоков на странице
Есть html
<div class="my" style="top: 274px; left: 215px;"></div> <div class="my" style="top: 145px; left: 115px;"></div> <div class="my" style="top: 352px; left: 415px;"></div> <div class="my" style="top: 474px; left: 325px;"></div> Планирую двигать сразу все блоки, но сначала мне надо как-то получить значения всех top и left. Класть наверное лучше их в 2 массива, но как их получить все до этого? |
Цитата:
может проще менять класс |
Ну допустим я сгенерил блоки с разными классами:
<div class="my1" style="top: 274px; left: 215px;"></div> <div class="my2" style="top: 145px; left: 115px;"></div> <div class="my3" style="top: 352px; left: 415px;"></div> <div class="my4" style="top: 474px; left: 325px;"></div> В этом случае всё равно надо сначала спарсить значения свойств этих блоков... А ещё тогда будет много дублирования кода, т.к. общие для всех значения придётся дублировать, хотя можно их в общий стиль вынести наверное |
Цитата:
|
mrbanan,
циклом по всем нужным вам элементам, другого пути нет. |
Хорошо, цикл не проблема, но если я создам 100 объектов с id допустим от my1 до my100 а в css-то их не будет...
Т.е. некорректно будет ссылка на несуществующий id в css а GetElementByClassname не кроссбраузерный |
mrbanan,
не осилил я ваших речей ... <!DOCTYPE HTML> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> .my{ position: absolute; width: 10px; height: 10px; background-color: #0000CD; } </style> </head> <body> <div class="my" style="top: 274px; left: 215px;"></div> <div class="my" style="top: 145px; left: 115px;"></div> <div class="my" style="top: 352px; left: 415px;"></div> <div class="my" style="top: 474px; left: 325px;"></div> <script> var arr = [].map.call( document.querySelectorAll('.my'), function(el) { var pos = el.getBoundingClientRect() return {top : pos.top, left: pos.left} }); document.write(JSON.stringify(arr)) </script> </body> </html> |
оберни их в jQuery:
$('div[class^=my]').each(function() { // а тут для каждого меняй свойсвта }); |
что-то типа этого (если я правильно понял идею). Нажми на кнопку - получишь результат :)
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"/> <title>Двигай </title> <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script> <style> div { border: 1px solid black; position: absolute; background: red;} </style> <script type="text/javascript"> window.onload = function() { document.getElementById('myBtn').onclick = function() { var addTop = 10, addLeft = 10; var $allDiv = $('div[class^=my]').each(function() { this.style.top = parseInt(this.style.top) + addTop + 'px'; this.style.left = parseInt(this.style.left) + addLeft + 'px'; }); } }; </script> </head> <body> <input type='button' id='myBtn' value='Click me'> <div class="my1" style="top: 74px; left: 115px;">11</div> <div class="my2" style="top: 45px; left: 15px;">22</div> <div class="my3" style="top: 52px; left: 315px;">33</div> <div class="my4" style="top: 34px; left: 225px;">44</div> </body> </html> |
Keramet, jQuery здесь очень нужен :D
|
Часовой пояс GMT +3, время: 16:51. |