时间戳

首页 > 解决方案 > Javascript 更改标记名称的样式

javascript - Javascript 更改标记名称的样式

问题描述

我正在尝试完成滚动功能以根据滚动位置修改标题样式。

我对 JS 的了解有限，所以如果它很容易解决，请多多包涵。

位于https://codepen.io/Rhyfelwr/pen/gObyNGB的 Codepen 项目

window.onscroll = function() {scrollHeaderShrinkFunction()};

function scrollHeaderShrinkFunction() {
  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {//when shrunk
    document.getElementById("header").style.height = "30px";
    document.getElementById("header").style.fontSize = "1.0em";
    document.getElementById("header").style.borderBottom = "1px solid #333";
  } else {//default
    document.getElementById("header").style.height = "90px";
    document.getElementById("header").style.fontSize = "3em";
    document.getElementById("header").style.borderBottom = "3px solid #333";
  }
}
#header {
  background-color: #f1f1f1;
  padding: 10px;
  color: black;
  text-align: center;
  font-size: 2em; 
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  transition: 1s;
}
#header img{
  max-height: 100%;
}
<body>

  
<div id="header">
  <img src="https://www.donbur.co.uk/gb-en/css/img/don-bur-logo-svg.svg" alt="logo">
  Header
  </div>

<div style="margin-top:100px;padding:15px 15px;font-size:30px">
  <p>Shrinking Header Logo</p>

  <p>Lorem ipsum dolor dummy text sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor dummy text sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor dummy text sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor dummy text sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

</body>

我使用简单的 getElementById() 来修改 div 样式，但我的页面是 html5，而不是 div ID。

我尝试切换到 getElementsByTagName() 但它似乎不起作用。

请问我错过了什么？

标签： javascriptgetelementbyidgetelementsbytagname

解决方案

该函数getElementsByTagName返回一个元素数组，而不仅仅是一个！

因此，您需要遍历这些元素：

var elems = document.getElementsByTagName("p");
for(const elem of elems) {
    elem.style.height = "30px";
}

推荐阅读