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

Question

我想在改变他的大小时为我的标题创建一个函数。我在标题内有一个logo img。我希望当我更改header

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">或通过在JavaScript中设置的.style，如：element.style = something;。您的代码基于检查if的mainNav.style.height条件，但此时尚未在HTML或JavaScript中设置style属性。

相反，使用.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

Javascript中的style属性仅为您提供元素的内联样式 - 直接在style属性中定义的样式。

您需要getComputedStyle来访问所使用的实际属性，并考虑所有CSS规则。