Javascript更改H1大小/顏色/等

Question

我對javascript很陌生，但是一直在努力。 我現在被困住了。 當用戶向下滾動頁面時，我試圖縮小標題。 我已經完成了所有工作，但我無法弄清楚如何使用javascript來調整這一h1（徽標）元素的大小。 請幫忙！！

我的JavaScript：

var header, yPos;
function yScroll(){
header = document.getElementById('header');
yPos = window.pageYOffset;
if(yPos > 120){
    header.style.height = "36px";
    header.style.paddingTop = "0px";
    header.style.background = "#005A31";
} else {
    header.style.height = "120px";
    header.style.paddingTop = "10px";
    header.style.background = "#A8CD1B";
}
}

我的HTML：

<div class = "container" id = "header">
STUFF HERE
<div class = "container" id = "logo">
<h1><a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a></h1>
    </div>
STUFF HERE
 </div>

Answer 1

就您而言，一切都很好，但是您需要將函數綁定到文檔。

你可以做如下

window.addEventListener("scroll", yScroll);

編輯：對於文本的大小，您需要更改font-size屬性。 您正在更改高度，即區域的高度。

您可以執行以下操作：

首先為h1添加一個ID。

<h1 id="myH" ...

然后

document.getElementById("myH").style.fontSize = "36px";