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

@Adriani6 both are one logo, just used js to make it big and small — user11300121
– user11300121, Commented Apr 22, 2019 at 7:31
Like this: .logo { width:100%; text-align:center } #logo {margin:auto} — mplungjan
– mplungjan, Commented Apr 22, 2019 at 7:39

Andreas · Accepted Answer · 2019-04-22 08:01:06Z

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.

edited Apr 22, 2019 at 8:01

Andreas

2,52110 gold badges24 silver badges25 bronze badges

answered Apr 22, 2019 at 7:36

Dat Boi

6935 silver badges12 bronze badges

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

Comments

Obed Parlapiano · Accepted Answer · 2019-04-22 07:36:05Z

0

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.

edited Apr 22, 2019 at 7:36

answered Apr 22, 2019 at 7:31

Obed Parlapiano

3,7703 gold badges25 silver badges40 bronze badges

7 Comments

Obed Parlapiano Over a year ago

@ZubairShah I updated my answer, I think I understand what you need now.

user11300121 Over a year ago

but the width is not increasing, as i want

Obed Parlapiano Over a year ago

I didn't understand your last comment. Your question is how can i make the bigger logo which appears when the page load to the center without effecting the smaller logo. You never mentioned width not increasing.

user11300121 Over a year ago

the width is increasing in my javascript

user11300121 Over a year ago

but when i am using your code, the width is not increasing, its jist slight bigger than my smaller logo,but it dsnt change the size that i gave in my js. before using ur code it was working properly

|

Hien Nguyen · Accepted Answer · 2019-04-22 07:36:32Z

0

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>

edited Apr 22, 2019 at 7:36

answered Apr 22, 2019 at 7:30

Hien Nguyen

19k7 gold badges57 silver badges70 bronze badges

1 Comment

user11300121 Over a year ago

i didnt understand what you said

Collectives™ on Stack Overflow

how to edit css inside javascript

3 Answers 3

Comments

7 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related