javascript - 无法在 JavaScript 中更改图像的高度

Question

我想在标题改变大小时为它创建一个函数。我在标题内有一个 Logo img。我想要当我更改标题 s height to be for example 80px the image to be 80 px as well.
I initialized a function in Javascript but doesn 时没用(我是 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>