Как получить значение свойства "bottom" (JS)?

Question

Есть такой html:

 <div class="correspondence">
            <section class="temp-login-user-message">
                <img src="img/unknown_male.png" alt="user-photo" id="user-photo">
                <p id="user-message">Some text</p>
                <p id="message-status">✓✓</p>
            </section>
 </div>

И css для этого блока html:

.correspondence{
    position: relative;
    width: 100%;
    height: 80vh;
    border: 3px solid #000000;
    border-top: none;
    background-color: #346ABC;
    overflow: scroll;
    overflow-x:hidden;
}

.temp-login-user-message {
    position: absolute;
    bottom: 200px;
    right: 0;
    width: 100%;
}

И в js я пытаюсь получить значение свойства "bottom" класса "temp-login-user-message":

var messageBlock = document.getElementById("temp-login-user-message");
var bottomProp = messageBlock.style.bottom;
console.log(bottomProp);

Однако в консоль выводит пустую строку, вместо "200px". В чем может быть проблема? Заранее спасибо.

Answer 1

var element = document.querySelector(".temp-login-user-message");
var bottomProp = getComputedStyle(element).bottom;
console.log(bottomProp);

.correspondence {
  position: relative;
  width: 100%;
  height: 80vh;
  border: 3px solid #000000;
  border-top: none;
  background-color: #346ABC;
  overflow: scroll;
  overflow-x: hidden;
}

.temp-login-user-message {
  position: absolute;
  bottom: 200px;
  right: 0;
  width: 100%;
}

<div class="correspondence">
  <section class="temp-login-user-message">
    <img src="img/unknown_male.png" alt="user-photo" id="user-photo">
    <p id="user-message">Some text</p>
    <p id="message-status">✓✓</p>
  </section>
</div>

Answer 2

Ваша ошибка в том, что у вас нет элемента с id temp-login-user-message. Просто добавьте элементу section id со значением temp-login-user-message в html, а для получения значения свойства bottom, используйте метод getComputedStyle.

Можете ознакомиться с методом getComputedStyle здесь.

var messageBlock = document.getElementById("temp-login-user-message");
var bottomProp = getComputedStyle(messageBlock).bottom;
alert(bottomProp);

correspondence{
    position: relative;
    width: 100%;
    height: 80vh;
    border: 3px solid #000000;
    border-top: none;
    background-color: #346ABC;
    overflow: scroll;
    overflow-x:hidden;
}

.temp-login-user-message {
    position: absolute;
    bottom: 200px;
    right: 0;
    width: 100%;
}

<div class="correspondence">
            <section id="temp-login-user-message" class="temp-login-user-message">
                <img src="img/unknown_male.png" alt="user-photo" id="user-photo">
                <p id="user-message">Some text</p>
                <p id="message-status">✓✓</p>
            </section>
 </div>

БЛОГ НА HUSL

Как получить значение свойства "bottom" (JS)?

Ответы (2 шт):