Не могу изменить высоту изображения в javascript

Question

Я хочу создать функцию для моего заголовка при его изменении его размера.У меня есть логотип img внутри заголовка. Я хочу, чтобы при смене заголовка s height to be for example 80px the image to be 80 px as well. I initialized a function in Javascript but doesn t работал (я новичок в Javascript).Пожалуйста, скажите мне, что я делаю не так в js, и, возможно, покажите мне правильный способ сделать это.

 <header class="header">
    <div class="container">
      <div class="header-content">
       <img src='http://www.lazarangelov.com/wp-content/uploads/2015/12/logo1.jpg' class="logo" alt="logo">
        <div class="menu-links">
          <ul class="links-list">
            <li><a href="#">Home</a></li>
            <li><a href="#">Bio</a></li>
            <li><a href="#">Training</a></li>
            <li><a href="#">Academy</a></li>
            <li><a href="#">Gallery</a></li>
            <li><a href="#">Store</a></li>
            <li><a href="#">Contacts</a></li>
          </ul>
        </div>
      </div>
    </div>
  </header>


.header {
    background: blue;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 20;
  height: 80px;}
.header-content{
  display:flex;
}
.menu-links{
  display:flex;
}
.links-list{
  display:flex;
  color:white;
}


const mainNav = document.querySelector('.header');
const img = document.querySelector('.logo');

if (mainNav.style.height == '80px') {
    img.style.height = '80px';
} else {
    img.style.height = '100px';
}

Answer 1

Свойство .style может возвращать только информацию о стиле, которая была установлена ​​непосредственно в элемент HTML, либо статически в HTML, как в: <p style="something here">, либо через .style, устанавливаемую в JavaScript, как в: element.style = something;,Ваш код основан на условии if, которое проверяет mainNav.style.height, но свойство style не было установлено в HTML или JavaScript на этом этапе.

Вместо этого используйте .getComputedStyle(), который возвращает окончательное значение для предоставленного стиля после того, как все вычисления (независимо от того, где они были применены) приняты во внимание.

Я добавил красную рамку к вашему изображению в коде ниже, чтобыпокажите, что он расширяет height до того же размера, что и header.

const mainNav = document.querySelector('.header');
const img = document.querySelector('.logo');

// You can't check the .style property if the element
// hasn't had that attribute or property set yet.
if (getComputedStyle(mainNav).height == '80px') {
    img.style.height = '80px';
} else {
    img.style.height = '100px';
}

.logo { border:1px dashed red; }
.header {
    background: blue;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 20;
  height: 80px;}
.header-content{
  display:flex;
}
.menu-links{
  display:flex;
}
.links-list {
  display:flex;
  color:white;
}

.links-list a { color: white; }

<header class="header">
 <div class="container">
  <div class="header-content">
   <img src=
'http://www.lazarangelov.com/wp-content/uploads/2015/12/logo1.jpg'
     class="logo" alt="logo">
        <div class="menu-links">
          <ul class="links-list">
            <li><a href="#">Home</a></li>
            <li><a href="#">Bio</a></li>
            <li><a href="#">Training</a></li>
            <li><a href="#">Academy</a></li>
            <li><a href="#">Gallery</a></li>
            <li><a href="#">Store</a></li>
            <li><a href="#">Contacts</a></li>
          </ul>
        </div>
      </div>
    </div>
  </header>

Answer 2

Свойство style в Javascript дает вам только стили inline элемента - те, которые определены непосредственно в атрибуте style для него.

Вам нужно getComputedStyle для доступа к фактическим используемым свойствам с учетом всех правил CSS.