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

我想为我的标题创建一个函数，当它改变他的大小时。 我在页眉里面有一个logo img。我想当我把页眉

s的高度改为例如80px时，图像也变成80px。
我用Javascript初始化了一个函数，但不起作用（我是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';
}











.标题{
背景：蓝色；
位置：固定；
排名：0；
左：0；
宽度：100%；
z指数：20；
高度：80px；}
.标题内容{
显示器：flex；
}
.菜单链接{
显示器：flex；
}
.链接列表{
显示器：flex；
颜色：白色；
}
const mainNav=document.querySelector（'.header'）；
const img=document.querySelector（'.logo'）；
如果（mainNav.style.height==“80px”）{
img.style.height='80px'；
}否则{
img.style.height='100px'；
}
Javascript中的属性只提供元素的内联样式，即直接在元素的
样式
属性中定义的样式

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

属性只能返回直接设置到HTML元素中的样式信息，可以是在HTML中静态设置的，如：

或通过JavaScript中设置的

.style

，如：

element.style=something。您的代码基于检查
mainNav.style.height
的
if
条件，但此时还没有在HTML或JavaScript中设置
style
属性

取而代之的是use，它将在考虑所有计算（无论应用于何处）后返回所提供样式的最终值

我在下面的代码中为您的图像添加了一个红色边框，表明它正在将
高度
扩展为与
标题
相同的大小


const mainNav=document.querySelector（'.header'）；
const img=document.querySelector（'.logo'）；
//如果元素
//尚未设置该属性或属性。
如果（getComputedStyle（mainNav）.height=='80px'）{
img.style.height='80px'；
}否则{
img.style.height='100px'；
}
.logo{边框：1px红色虚线；}
.标题{
背景：蓝色；
位置：固定；
排名：0；
左：0；
宽度：100%；
z指数：20；
高度：80px；}
.标题内容{
显示器：flex；
}
.菜单链接{
显示器：flex；
}
.链接列表{
显示器：flex；
颜色：白色；
}
.links列表a{color:white；}










Man。。。我无法用语言感谢你的回答……这是我两天来一直在寻找的一切。@DConstantin很乐意帮忙。祝你好运