如何在JavaScript中编辑CSS

Question

我的网站上有一个徽标，当用户打开我的网站时，徽标很大，但是当他滚动时，徽标很小。我使用下面的javascript做到了

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>

出现的第一个徽标是朝向页面的一小部分，第二个徽标正确地位于中间，如下面的图片

当我尝试移动较大的徽标时，它会影响较小的徽标，因为这两个徽标位于同一div中。我如何制作将页面加载到中心时出现的较大徽标而不影响较小徽标。谁能帮忙

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>

如果您尚未在CSS中定义边距并改用位置，则此方法将起作用。我认为.....尝试一下。

Answer 2

您是否将脚本放在贴身标签之前？我尝试了您的代码，它仍然会更改宽度吗？

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

有多种方法可以实现这一目标。

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

更新：

重新阅读您的问题后，我想我明白了。

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

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

这应该使两个徽标居中对齐，无论其大小如何，都应使它们居中。