Javascript Change Style for Tag Names

Question

I'm trying to finish a scroll function to modify header style based on scroll position.

My knowledge of JS is limited so please bear with me if it's an easy fix.

Codepen project at https://codepen.io/Rhyfelwr/pen/gObyNGB

window.onscroll = function() {scrollHeaderShrinkFunction()};

function scrollHeaderShrinkFunction() {
  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {//when shrunk
    document.getElementById("header").style.height = "30px";
    document.getElementById("header").style.fontSize = "1.0em";
    document.getElementById("header").style.borderBottom = "1px solid #333";
  } else {//default
    document.getElementById("header").style.height = "90px";
    document.getElementById("header").style.fontSize = "3em";
    document.getElementById("header").style.borderBottom = "3px solid #333";
  }
}

#header {
  background-color: #f1f1f1;
  padding: 10px;
  color: black;
  text-align: center;
  font-size: 2em; 
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  transition: 1s;
}
#header img{
  max-height: 100%;
}

<body>

  
<div id="header">
  <img src="https://www.donbur.co.uk/gb-en/css/img/don-bur-logo-svg.svg" alt="logo">
  Header
  </div>

<div style="margin-top:100px;padding:15px 15px;font-size:30px">
  <p>Shrinking Header Logo</p>

  <p>Lorem ipsum dolor dummy text sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor dummy text sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor dummy text sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor dummy text sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

</body>

Im using a simple getElementById() to mod a div style but my pages are in html5 with rather then div IDs.

I tried switching to getElementsByTagName() but it doesn't seem to work.

What am I missing please?

The codepen does work fine but that example uses a div with id of header. I'm trying to switch the html5
tags — Richard Owens, Jan 28 '20 at 17:02
Other than setting the default height to 90px, this seems to work just fine — Luca Kiebel, Jan 28 '20 at 17:02
@LucaKiebel just done that - thanks - still have the issue as commented above. I'll ammend the codepen to illustrate the problem. — Richard Owens, Jan 28 '20 at 17:03
Even if you switch to a `
` element, I can't see any reason to stop using `getElementById`. Just put the `id` on your `
`. Is there a reason you want to move to `getElementsByTagName`? — benbotto, Jan 28 '20 at 17:04
@RichardOwens what element you use here doesn't really matter — Luca Kiebel, Jan 28 '20 at 17:05
@LucaKiebel that does indeed answer my question. Odd that the getElementsByTagName() does then change all tags....? I'll just add a unique ID then... — Richard Owens, Jan 28 '20 at 17:07
@avejidah - done and updated the codepen with a unique "shrinkingheader" id.... works great. — Richard Owens, Jan 28 '20 at 17:09

Anis R. · Answer 1 · 2020-01-28T17:20:20.430

0

The function getElementsByTagName returns an array of elements, not just one!

Therefore, you need to loop over these elements:

var elems = document.getElementsByTagName("p");
for(const elem of elems) {
    elem.style.height = "30px";
}

edited Jan 28 '20 at 17:20

answered Jan 28 '20 at 17:04

Anis R.

6,656
2
15
37

1

I'm not the one that down-voted this, but given that it's 2020 the JS community should start promoting the newer standards (const, let, for of, etc.). – benbotto Jan 28 '20 at 17:07
This is a pretty common question and we don't need more answers to it. – Luca Kiebel Jan 28 '20 at 17:09
I've up-voted it, but it's not the solution I'll use. I'll just add the unique id to the
element.
– Richard Owens Jan 28 '20 at 17:15
Answer updated @avejidah. I wasn't quite sure if I can use for of with a DOM elements array. – Anis R. Jan 28 '20 at 17:21

Javascript Change Style for Tag Names

1 Answers1