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

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

element.style.bottom визначає відстань між нижнім краєм елемента та нижнім краєм його найближчого позиційного контейнера. Ця властивість використовується для позиціонування елементів відносно їх контейнерів та працює тільки з елементами, у яких встановлено значення position як absolute, fixed або relative.

Щоб використовувати element.style.bottom, спочатку переконайтеся, що позиціонування елемента задано правильно. Наприклад, для елемента з ідентифікатором myElement ви можете встановити властивість position як absolute та задати значення bottom:

let element = document.getElementById('myElement');
element.style.position = 'absolute';
element.style.bottom = '20px';

У цьому прикладі елемент буде розташований на 20 пікселів вище нижнього краю його контейнера. Одиниці вимірювання можуть бути різними, такими як пікселі (px), відсотки (%), ем (em) та інші.

Для динамічного зміни позиції елемента, ви можете використовувати JavaScript. Наприклад, змінюючи значення bottom у відповідь на подію:

document.addEventListener('scroll', function() {
  let element = document.getElementById('myElement');
  let newBottomValue = window.scrollY + 'px';
  element.style.bottom = newBottomValue;
});

Цей код змінює позицію елемента від нижнього краю контейнера в залежності від прокручування сторінки.

Якщо ви хочете отримати поточне значення властивості bottom, можна зробити це наступним чином:

let element = document.getElementById('myElement');
let currentBottom = element.style.bottom;
console.log(currentBottom);

Також важливо враховувати, що властивість bottom взаємодіє з іншими властивостями позиціонування, такими як top, left, та right. Зазвичай, при установці bottom разом із top, браузер буде пріоритизувати одне з значень в залежності від контексту.

Для прикладу, давайте розглянемо анімацію, яка переміщує елемент вгору та вниз:

let element = document.getElementById('myElement');
element.style.position = 'absolute';
element.style.bottom = '0px';

function moveUp() {
  let bottomValue = parseInt(element.style.bottom);
  element.style.bottom = (bottomValue + 10) + 'px';
}

function moveDown() {
  let bottomValue = parseInt(element.style.bottom);
  element.style.bottom = (bottomValue - 10) + 'px';
}

document.getElementById('upButton').addEventListener('click', moveUp);
document.getElementById('downButton').addEventListener('click', moveDown);

Цей приклад показує, як змінювати позицію елемента за допомогою кнопок. Кожного разу, коли натискається кнопка, значення bottom змінюється, переміщуючи елемент вгору або вниз.

Отже, element.style.bottom є корисною властивістю для керування позицією елементів відносно їх контейнерів, дозволяючи гнучко змінювати їх розташування за допомогою JavaScript.

Синтаксис

element.style.bottom

Значення

Return

Переглядачі

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

Приклади

• Приклад 1
• Приклад 2
• Приклад 3

let element = document.getElementById('scrollElement');
let initialBottomValue = 0;
window.addEventListener('scroll', function() {
  let scrollPosition = window.scrollY;
  element.style.bottom = (initialBottomValue + scrollPosition) + 'px';
});

let element = document.getElementById('toggleElement');
let isAtBottom = false;
document.getElementById('toggleButton').addEventListener('click', function() {
  if (isAtBottom) {
    element.style.bottom = '0px';
  } else {
    element.style.bottom = '100px';
  }
  isAtBottom = !isAtBottom;
});