如何在javascript中编辑css

我在我的网站上有一个徽标，当用户打开我的网站时，徽标很大，但当用户滚动时，徽标变小了。我使用javascript实现了这一点，如下所示

window.onscroll=function（）{
growshrinkogo（）
};
函数growshrinkogo（）{
var Logo=document.getElementById（“Logo”）
if（document.body.scrollTop>5 | | document.documentElement.scrollTop>5）{
Logo.style.width='80px'；
}否则{
Logo.style.width='200px'；
}
}

---

是否将脚本放在关闭主体标记之前？我试过你的代码，它仍然改变宽度

window.onscroll=function（）{
growshrinkogo（）
};
函数growshrinkogo（）{
var Logo=document.getElementById（“Logo”）
if（document.body.scrollTop>5 | | document.documentElement.scrollTop>5）{
Logo.style.width='80px'；
}否则{
Logo.style.width='200px'；
}
}

---

实现这一点有多种方法

• 使用两个不同的HTML元素（两个徽标），然后隐藏/显示它们，类似于更改单个元素的CSS。这样，您就可以独立地修改每个徽标的CSS
• 为页面加载更改主徽标的CSS，然后用JavaScript修复它（基本上，删除为大徽标添加的任何内容）

更新：

重读你的问题后，我想我明白了

尝试将此添加到CSS（根据需要进行更新）：

这将使两个徽标居中对齐，并使它们无论大小都保持居中。

window.onscroll=function（）{
growshrinkogo（）；
};
函数growshrinkogo（）{
var Logo=document.getElementById（“Logo”）；
if（document.body.scrollTop>5 | | document.documentElement.scrollTop>5）{
Logo.style.width='80px'；
Logo.style.marginLeft='60px'；
}否则{
Logo.style.width='200px'；
Logo.style.marginLeft='0px'；
}
}

margin:auto可能有用？另一个徽标在哪里？@mplungjan但两个徽标在同一个位置div@Adriani6这两个都是一个徽标，只是用js把它变大变小，就像这样：

.logo{width:100%；text align:center}#logo{margin:auto}

我不明白你说的是什么said@ZubairShah我更新了我的答案，我想我知道你现在需要什么。但是宽度没有增加，因为我不明白你最后的评论。您的问题是

如何制作页面加载到中心时出现的较大徽标，而不影响较小的徽标

。您从未提到宽度不增加。在我的JavaScription中，宽度正在增加，但当我使用您的代码时，宽度没有增加，它的jist略大于我较小的徽标，但它不会更改我在js中给出的大小。在使用您的代码之前，它工作正常

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