MYSQL
PHP
HTML
CSS
JS

Расположение элемента JS динамически

При разработке сайтов часто требуется изменять позицию элементов динамически. Первый способ сделать это с помощью CSS Но если изменять позицию нужно по-разному, в зависимости от условий, то лучшим выбором будет Javascript. Итак, у нас есть элемент:
?
1
<div id='test-position'>Позиционирование в js</div>
Изменение позиции без jQuery: В этом нам может помочь margin:
?
1
2
3
4
5
6
<script>
var element = document.getElementById("test-position");
element.style.margin = "15px";
//или
element.style.marginLeft = "55px";
</script>
Интерактивный вариант:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
<div id='interactive-position'>Интерактивное позиционирование в JS. Кликни меня!</div>
 
<script>
var element = document.getElementById("interactive-position");
 
element.addEventListener(
   "click",
   function (event) {
      var leftMargin = parseInt(event.target.style.marginLeft) || 0;
      event.target.style.marginLeft = leftMargin + 10 + "px";
   }
);
</script>
Интерактивное позиционирование в JS. Кликни меня!
Изменение позиции c использованием jQuery:
?
1
2
3
4
5
6
7
8
9
10
11
12
<div id='interactive-position-jquery' class="lesson-btn">Пример динамического позиционирования</div>
 
<script>
$("#interactive-position-jquery").on("click", function () { $(this).remove() });
$(window).on("mousemove", function (event) {
   $("#interactive-position-jquery").css({
      top: event.pageY - 100 + "px",
      right: '25px',
      position: "absolute"
   });
});
</script>
Пример динамического позиционирования
Спасибо за внимание.
Если статья Вам показалась незаконченной или Вы знаете как её улучшить, пожалуйста сообщите мне e@gohtml.ru

Случайные уроки по этой теме:

Базовые типы переменных в JavaScript Новогодние снежинки на JS Плавная прокрутка страницы (scroll). jQuery jQuery изнутри. Делаем селектор $, замыкание, $.css WebGL 3D Земля в браузере. Библиотека Three.js
↑