How to change header height in Javascript?

Question

I'm trying to change the header height dynamically within my Javascript code (within the second if statement). Here's the code I have at the moment:

var currentDate =  new Date();
    // Months are zero indexed, so for 21 December:
    var saleStart = new Date("12-10-2017");
    var saleEnd = new Date("12-19-2019");

    if (saleStart <= currentDate && currentDate <= saleEnd && sessionStorage.getItem('firstVisit') === null) {
        // Set display to '' (empty string) so the element adopts its default or inherited value
        $(".sale_banner").show();
        $(".hover_bkgr_fricc").show();
        sessionStorage.setItem('firstVisit', '1');

    }
    else if(saleStart <= currentDate && currentDate <= saleEnd)
    {
        document.getElementsByClassName('header').style.height="140px";
        $(".sale_banner").show();
    }
    else{
        $(".sale_banner").hide();

    }

For some reason the line to change the header height does nothing! I've also tried using getElementbyId but that does nothing too!

My header.phtml file opens with the following tag:

<header class="desktop">

This is the section of CSS I'm trying to change:

header.desktop {
  height: 173px;
  background-color: #6E348C;
}

I've used header, desktop, header.desktop in the parentheses but still no luck! This is the error I get on the console:

Uncaught TypeError: Cannot read property 'style' of null
    at HTMLDocument.<anonymous> (myproject.js:28)
    at i (jquery.min.js:2)
    at Object.fireWith [as resolveWith] (jquery.min.js:2)
    at Function.ready (jquery.min.js:2)
    at HTMLDocument.J (jquery.min.js:2)

Does anyone know what I'm missing?

please add the relevant HTML and/or create a Minimal and reproducible example: stackoverflow.com/help/minimal-reproducible-example — Cesar Correchel
– Cesar Correchel, Commented Dec 16, 2019 at 16:36

Zhephard · Accepted Answer · 2019-12-16 18:47:57Z

1

Using getElementsByClassName always returns an array, you might want to change that to

document.getElementsByClassName('header')[0].style.height="140px";

That assuming you only have one header element, it would be nice if you could use id instead of class names

answered Dec 16, 2019 at 18:47

Zhephard

3601 silver badge13 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Lloyd Over a year ago

Thank you for your comment. I have also tried putting a zero array index in but still no luck :( the css I'm trying to change is header.desktop, should I still use 'header' in the parentheses?

Zhephard Over a year ago

Is there a chance that you can use <header> with an id? So you can use document.getElementById('desktopHeader').style.height="140px"

Lloyd Over a year ago

Your answer did the trick! Adding an id for the header was what was needed! Thanks so much!

Damian Peralta · Accepted Answer · 2019-12-17 10:42:06Z

1

I haven't seen your HTML code, but I guess you don't have a header class. Your CSS suggests you have a header tag with a desktop class (header.desktop) Then, you should try with getElementsByClassName or querySelector, :

document.getElementsByClassName('desktop')
// or
document.querySelector('.desktop')

You can use any of them, but querySelector is a more modern method and only returns one element (if you have several elements with the same classname, then try querySelectorAll or getElementsByClassName)

Check this: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

UPDATE: Try this

function changeHeight() {
  // Note that the class name is 'desktop', while 'header' is the name of the HTML tag
  document.querySelector('.desktop').style.height = "100px"
}

header.desktop {
  height: 50px;
  background-color: #6E348C;
}

<header class="desktop">This is the header</header>
<button onclick="changeHeight()">Change height</button>

edited Dec 17, 2019 at 10:42

answered Dec 16, 2019 at 16:42

Damian Peralta

1,8969 silver badges12 bronze badges

3 Comments

Lloyd Over a year ago

Thank you for your help. I've tried your code but still no luck unfortunately. Would I still use style.height in the same way? Like this: document.querySelector('.desktop').style.height="140px";. I'll update my post to show my HTML now! :)

Damian Peralta Over a year ago

You should paste your HTML

Lloyd Over a year ago

I've just pasted the HTML snippet. The only relevant part is where I open the header tag.

Collectives™ on Stack Overflow

How to change header height in Javascript?

2 Answers 2

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related