Форум

mrbanan · #1 (**permalink**) 08.01.2016, 23:38

Есть 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 массива, но как их получить все до этого?

рони · #2 (**permalink**) 09.01.2016, 00:06

Сообщение от mrbanan

Планирую двигать сразу все блоки

как?
может проще менять класс

mrbanan · #3 (**permalink**) 09.01.2016, 00:09

Ну допустим я сгенерил блоки с разными классами:

<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>

В этом случае всё равно надо сначала спарсить значения свойств этих блоков...
А ещё тогда будет много дублирования кода, т.к. общие для всех значения придётся дублировать, хотя можно их в общий стиль вынести наверное

рони · #4 (**permalink**) 09.01.2016, 00:11

Сообщение от mrbanan

допустим я сгенерил блоки

тогда какой смысл узнавать, то что известно?

рони · #5 (**permalink**) 09.01.2016, 00:12

mrbanan,
циклом по всем нужным вам элементам, другого пути нет.

mrbanan · #6 (**permalink**) 09.01.2016, 00:40

Хорошо, цикл не проблема, но если я создам 100 объектов с id допустим от my1 до my100 а в css-то их не будет...
Т.е. некорректно будет ссылка на несуществующий id в css а GetElementByClassname не кроссбраузерный

рони · #7 (**permalink**) 09.01.2016, 00:53

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>

Keramet · #8 (**permalink**) 09.01.2016, 01:02

оберни их в jQuery:

$('div[class^=my]').each(function() {
	// а тут для каждого меняй свойсвта
});

Keramet · #9 (**permalink**) 09.01.2016, 01:46

что-то типа этого (если я правильно понял идею). Нажми на кнопку - получишь результат

<!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>

Decode · #10 (**permalink**) 09.01.2016, 02:03

Keramet, jQuery здесь очень нужен

Форум

Справочник

Discord чат

Курсы javascript