Массово поменять свойства блоков на странице
Есть 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, время: 10:53. |