如何在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;
}

這應該使您的兩個徽標居中對齊，並使它們無論大小如何都保持居中。