how to edit css inside javascript

Question

I have a logo in my website, when the user opens my website the logo is big, but when he scrolls it becomes small. i did that using javascript like below

 window.onscroll = function() { growShrinkLogo() }; function growShrinkLogo() { var Logo = document.getElementById("logo") if (document.body.scrollTop > 5 || document.documentElement.scrollTop > 5) { Logo.style.width = '80px'; } else { Logo.style.width = '200px'; } }

 <div class="logo"> <div class="relative-logo"> <img id="logo" src="assets/images/logo.png" alt="logo"> </div> </div>

the first logo which appears is a littile bit right towards the page and the second is properly in the center, like below images

when i am trying to move the bigger logo it is effecting the small logo because both of it is in the same div. how can i make the bigger logo which appears when the page load to the center without effecting the smaller logo. can anyone help

Answer 1

 window.onscroll = function() { growShrinkLogo(); }; function growShrinkLogo() { var Logo = document.getElementById("logo"); if (document.body.scrollTop > 5 || document.documentElement.scrollTop > 5) { Logo.style.width = '80px'; Logo.style.marginLeft = '60px'; } else { Logo.style.width = '200px'; Logo.style.marginLeft = '0px'; } }

 <div class="logo"> <div class="relative-logo"> <img id="logo" src="assets/images/logo.png" alt="Logo" /> </div> </div>

This will work if you haven't already defined a margin in your CSS and used position instead. I think..... try it out.

Answer 2

Did you put script before close body tag? I tried your code, it still change width?

 window.onscroll = function() { growShrinkLogo() }; function growShrinkLogo() { var Logo = document.getElementById("logo") if (document.body.scrollTop > 5 || document.documentElement.scrollTop > 5) { Logo.style.width = '80px'; } else { Logo.style.width = '200px'; } }

 <div class="logo"> <div class="relative-logo"> <img id="logo" src="http://pngimg.com/uploads/google/google_PNG19644.png" alt="logo"> </div> </div> <div> </div>

Answer 3

There are multiple ways of achieving this.

• Use two different HTML elements (two logos) and then hide/show them, similar to how you're changing the CSS of a single element. That way you can modify each logo's CSS independently.
• Change the CSS of your main logo for page load, and then fix it back with JavaScript (basically, remove whatever you added for the big one)

Update:

After re-reading your question I think I understand.

Try adding this to your CSS (update according to your needs):

.relative-logo {
  display: flex;
  justify-content: center;
  align-items: center;
}

That should center align both of your logos and make them stay centered regardless of their size.