JS властивість CSSStyleDeclaration.left

Загальний опис

element.style.left – це властивість об'єкта HTMLElement, яка дозволяє керувати горизонтальним положенням елемента на веб-сторінці. Властивість left використовується для встановлення або отримання відступу елемента від лівого краю його найближчого розташованого батьківського елемента з відносним (relative) або абсолютним (absolute) позиціюванням.

Використання властивості element.style.left може бути необхідним для динамічного змінення положення елемента на сторінці за допомогою JavaScript. Значення цієї властивості встановлюється у вигляді рядка, що містить числове значення разом з одиницями вимірювання (наприклад, "10px", "2em", "%").

Розглянемо простий приклад, де ми будемо змінювати горизонтальне положення елемента:

// Отримуємо елемент за допомогою його id
let element = document.getElementById('myElement');

// Встановлюємо нове значення властивості left
element.style.left = '100px';

Цей код перемістить елемент з ідентифікатором myElement на 100 пікселів вправо відносно його батьківського елемента.

Динамічна зміна положення

Приклад з динамічною зміною положення елемента при кліку на кнопку:

let button = document.getElementById('moveButton');
let element = document.getElementById('myElement');

button.addEventListener('click', function() {
    // Отримуємо поточне значення left і перетворюємо його на число
    let currentLeft = parseInt(element.style.left) || 0;
    
    // Збільшуємо поточне значення на 50 пікселів
    element.style.left = (currentLeft + 50) + 'px';
});

Цей код додає обробник події для кнопки, який при кожному кліку збільшує відступ елемента myElement на 50 пікселів.

Отримання поточного значення left

Для отримання поточного значення властивості left можна скористатися таким кодом:

let currentLeft = element.style.left;
console.log('Поточне значення left: ', currentLeft);

Висновок

Властивість element.style.left є корисним інструментом для управління розташуванням елементів на веб-сторінці за допомогою JavaScript. Вона дозволяє створювати динамічні та інтерактивні інтерфейси, змінюючи позицію елементів у реальному часі.

правити

Нотатка

Властивість element.style.left працює лише з елементами, які мають явно встановлене позиціювання (position: relative, position: absolute, position: fixed або position: sticky). Без цього властивість не буде мати жодного ефекту.

автор: Bond правити

Нотатка

Значення властивості left повинно містити одиниці вимірювання, такі як px, em, % тощо. Без вказання одиниць вимірювання зміна положення елемента не відбудеться.

автор: Bond правити

Нотатка

Якщо значення left не було раніше встановлене, його значення буде порожнім рядком.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

element.style.left

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	3	8	12

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Підтримка: серверні переглядачі

Переглядач
	-	-

Приклади

+ запропонувати свій приклад у пісочниці

<div id="animatedElement">Демонстраційний елемент</div>

let element = document.getElementById('animatedElement');
let position = 0;

function animate() {
    if (position < 300) {
        position++;
        element.style.left = position + 'px';
        requestAnimationFrame(animate);
    }
}

// Запускаємо анімацію
animate();

<div id="draggableElement">Демонстраційний елемент</div>

let element = document.getElementById('draggableElement');

element.addEventListener('mousedown', function(event) {
    let shiftX = event.clientX - element.getBoundingClientRect().left;

    function moveAt(pageX) {
        element.style.left = pageX - shiftX + 'px';
    }

    function onMouseMove(event) {
        moveAt(event.pageX);
    }

    document.addEventListener('mousemove', onMouseMove);

    document.addEventListener('mouseup', function() {
        document.removeEventListener('mousemove', onMouseMove);
    }, { once: true });
});

element.ondragstart = function() {
    return false;
};