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.

правити

Порада

Для динамічного позиціонування елементів залежно від висоти вікна використовуйте window.innerHeight. Це дозволяє адаптувати розташування елемента до змін розміру вікна браузера, забезпечуючи кращу адаптивність сайту. Наприклад:

window.addEventListener('resize', function() {
  let element = document.getElementById('responsiveElement');
  element.style.bottom = (window.innerHeight * 0.1) + 'px';
});

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

Порада

Використовуйте element.style.bottom разом з умовними операторами для створення умовного стилювання. Це дозволяє змінювати позицію елемента в залежності від певних умов, таких як наявність або відсутність певного класу у елемента. Наприклад:

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

if (element.classList.contains('special')) {
  element.style.bottom = '50px';
} else {
  element.style.bottom = '10px';
}

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

Порада

Пам'ятайте про застосування власних анімаційних таймерів для плавного переміщення елементів. Замінюючи жорстке встановлення значення bottom на поступове змінення, можна досягти більш природного вигляду анімації. Наприклад:

let element = document.getElementById('smoothElement');
let targetPosition = 100;
let currentPosition = parseInt(window.getComputedStyle(element).bottom);

function smoothMove() {
  if (currentPosition < targetPosition) {
    currentPosition += 1;
    element.style.bottom = currentPosition + 'px';
    requestAnimationFrame(smoothMove);
  }
}

smoothMove();

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

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

Синтаксис

element.style.bottom

Переглядачі

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

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

Переглядач
	1	1	1	6	12	5

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

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

Приклади

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

<div id="scrollElement" class="scroll-demo">
    <div class="scroll-inner">Прокручуваний вміст</div>
</div>

.scroll-demo {
    width: 220px;
    height: 110px;
    overflow: auto;
    border: 1px solid #0172ad;
}

.scroll-inner {
    width: 600px;
    height: 400px;
    background: linear-gradient(135deg, #eef6ff, #0172ad);
    padding: 8px;
}

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

<div id="toggleElement">Демонстраційний елемент</div>
<button id="toggleButton">Перемкнути</button>

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;
});

<header>
  <h2 class="title">element.style.bottom</h2>
  <p class="description">Задає відстань від нижнього краю елемента до нижнього краю його контейнера.</p>
</header>
<main>
  <div class="result">
    <!-- Елемент, який буде переміщуватися -->
    <div id="movableElement" class="movable-box">Я рухаюся!</div>
    
    <!-- Кнопки для керування рухом елемента -->
    <div class="controls">
      <button id="moveUpButton">Вгору</button>
      <button id="moveDownButton">Вниз</button>
    </div>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

.movable-box {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 150px;
  height: 50px;
  background-color: #007bff;
  color: white;
  text-align: center;
  line-height: 50px;
  border-radius: 5px;
}

.controls {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.controls button {
  margin: 0 10px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}

let element = document.getElementById('movableElement');
let bottomValue = 0;

document.getElementById('moveUpButton').addEventListener('click', function () {
  if (bottomValue < 90) {// Зміна значення, обмеження вгорі контейнера
    bottomValue += 10;
    element.style.bottom = bottomValue + 'px';
  }
});

document.getElementById('moveDownButton').addEventListener('click', function () {
  if (bottomValue > 0) {// Зміна значення, обмеження внизу контейнера
    bottomValue -= 10;
    element.style.bottom = bottomValue + 'px';
  }
});
//# sourceURL=pen.js