CODEWITHSUNDEEP
javascriptfunctiondom
user11261905
user11261905

Reputation:

Can`t change the height on a image in javascript

I want to create a function for for my header when its changing his size. I have a logo img inside the header.I want when i change the headers height to be for example 80px the image to be 80 px as well. I initialized a function in Javascript but doesnt work( i`m a beginner at Javascript). Please tell me what i m doing wrong in js and maybe show me the right way to do it.

 <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';
}

Upvotes: 0

Views: 31

Answers (2)

Scott Marcus
Scott Marcus

Reputation: 65795

The .style property can only return style information that has been set directly into the HTML element, either statically in the HTML as in: <p style="something here"> or via the .style being set in JavaScript as in: element.style = something;. Your code is based on an if condition that checks mainNav.style.height, but the style property hasn't been set in HTML or JavaScript at that point.

Instead, use .getComputedStyle(), which returns the final value for the provided style after all computations (regardless of where they were applied) are taken into account.

I've added a red border to your image in the code below to show that it is expanding the height to be the same size as the 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>

Upvotes: 1

Robin Zigmond
Robin Zigmond

Reputation: 18249

The style property in Javascript only gives you the element's inline styles - those defined directly in a style attribute on it.

You need getComputedStyle to access the actual properties used, taking into account all CSS rules.

Upvotes: 0

Related Questions