时间戳

首页 > 解决方案 > Change class child property using javascript

javascript - Change class child property using javascript

问题描述

So I am currently learning to shrink my menu height while scrolled down, but i cant seem to find why I cant change my padding height on menu buttons, which is named "leftmenu" class on my html. So here is my code. sorry for sloppy code i'm currently learning.

html:

<body>
    <div id="menu">
        <a id="logo" href="#logo"><img id="logopic" src="logo.png"></a>
        <a class="leftmenu" href="#home">Home</a>
        <a class="leftmenu" href="#News">News</a>
        <a class="leftmenu" href="#About">About</a>
        <a class="leftmenu" href="#Contact">Contact</a>
        <a id="signupmenu" href="#Contact"><span id="signup"><span id="spansignup">Sign-up</span></span></a>
    </div>
</body>

CSS:

*{
    font-family: sans-serif;
    margin: 0;
}
body {
    height: 2000px;
    width: 100%;
}
body #menu {
    position: fixed;/*stay at top when scrolled*/
    transition: 0.4s;/*transition effect when shrink*/
    height: 19%;
    width: 100%;
    background-color: #333;
}
body #content {
    padding-top: 15%;
    height: 90%;
    width: 100%;
    background-color: #999;
}
#logo img{
    height: 120px;
    float: left;
    cursor: pointer;
    transition: 0.4s;/*transition effect when shrink*/
}
.leftmenu{
    display: block;
    float: left;
    text-decoration: none;
    color: white;
    padding: 48px 40px 48px 40px;
    font-size: 20px;
    transition: 0.4s;/*transition effect when shrink*/
}
.leftmenu:hover {
    background-color: #ddd;
    color: black;
}
#logo img:hover{
    background-color: #ddd;
    color: black;
}
h1 {
    padding-top: 40px;
    text-align: center;
    margin: 20px;
    color: white;

}
p {
    text-align: center;
    margin: 30px;
    color: white;
    font-family: monospace;
    font-size: 20px;
}
#signup{
    float: right;
    text-decoration: none;
    color: inherit;
    font-size: 20px;
    border: 2px solid transparent;
    border-radius: 20px;
    background-image: linear-gradient(#333,#333),radial-gradient(circle at top left,#F4A0FF, #C8BFE7, #99D9EA);
    background-origin: border-box;
    background-clip: content-box, border-box;
}
#spansignup{
    display: block;
    padding: 8px 22px;
}
#signupmenu{
    float: right;
    display: block;
    padding: 38px 40px 38px 40px;
    color: white;
    transition: 0.4s;/*transition effect when shrink*/
}
#signupmenu:hover{
    background-color: #ddd;
    color: black;
}
#signupmenu:hover #signup{
    background-image: linear-gradient(#ddd,#ddd),radial-gradient(circle at top left,#F4A0FF, #C8BFE7, #99D9EA);
}

Javascript:

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

function scrollFunction() {
  if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
    document.getElementById("menu").style.height = "10%";
    document.getElementById("logopic").style.height = "63px";
    document.getElementById("signupmenu").style.padding = "10px 40px 10px 40px";
    document.getElementsByClassName("leftmenu").style.padding = "20px 40px 20px 40px";    
  } else {
    document.getElementById("menu").style.height = "19%";
    document.getElementById("logopic").style.height = "120px";
    document.getElementById("signupmenu").style.padding = "38px 40px 38px 40px";
    document.getElementsByClassName("leftmenu").style.padding = "48px 40px 48px 40px";
  }
}

I tried using "for" statement but wont work on my codes.

标签： javascripthtmlcss

解决方案

因为document.getElementsByClassName("leftmenu").style.padding 返回一个数组。您将需要循环遍历数组并将其应用于数组中的每个项目，如下所示：

    var leftm = document.getElementsByClassName("leftmenu")
    for(var i = 0; i < leftm.length; i++){
    document.getElementsByClassName("leftmenu")[i].style.padding = "20px 40px 20px 40px"; }

工作示例：

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

function scrollFunction() {
  if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
    document.getElementById("menu").style.height = "10%";
    document.getElementById("logopic").style.height = "63px";
    document.getElementById("signupmenu").style.padding = "10px 40px 10px 40px";
    
    var leftm = 0;
    var leftm = document.getElementsByClassName("leftmenu")
    for(var i = 0; i < leftm.length; i++){
    document.getElementsByClassName("leftmenu")[i].style.padding = "20px 40px 20px 40px"; }
    
    
  } else {
    document.getElementById("menu").style.height = "19%";
    document.getElementById("logopic").style.height = "120px";
    document.getElementById("signupmenu").style.padding = "38px 40px 38px 40px";

    var leftm1 = 0;
    var leftm1 = document.getElementsByClassName("leftmenu")
    for(var i = 0; i < leftm1.length; i++){
    document.getElementsByClassName("leftmenu")[i].style.padding = "48px 40px 48px 40px"; }

  }
}
*{
    font-family: sans-serif;
    margin: 0;
}
body {
    height: 2000px;
    width: 100%;
}
body #menu {
    position: fixed;/*stay at top when scrolled*/
    transition: 0.4s;/*transition effect when shrink*/
    height: 19%;
    width: 100%;
    background-color: #333;
}
body #content {
    padding-top: 15%;
    height: 90%;
    width: 100%;
    background-color: #999;
}
#logo img{
    height: 120px;
    float: left;
    cursor: pointer;
    transition: 0.4s;/*transition effect when shrink*/
}
.leftmenu{
    display: block;
    float: left;
    text-decoration: none;
    color: white;
    padding: 48px 40px 48px 40px;
    font-size: 20px;
    transition: 0.4s;/*transition effect when shrink*/
}
.leftmenu:hover {
    background-color: #ddd;
    color: black;
}
#logo img:hover{
    background-color: #ddd;
    color: black;
}
h1 {
    padding-top: 40px;
    text-align: center;
    margin: 20px;
    color: white;

}
p {
    text-align: center;
    margin: 30px;
    color: white;
    font-family: monospace;
    font-size: 20px;
}
#signup{
    float: right;
    text-decoration: none;
    color: inherit;
    font-size: 20px;
    border: 2px solid transparent;
    border-radius: 20px;
    background-image: linear-gradient(#333,#333),radial-gradient(circle at top left,#F4A0FF, #C8BFE7, #99D9EA);
    background-origin: border-box;
    background-clip: content-box, border-box;
}
#spansignup{
    display: block;
    padding: 8px 22px;
}
#signupmenu{
    float: right;
    display: block;
    padding: 38px 40px 38px 40px;
    color: white;
    transition: 0.4s;/*transition effect when shrink*/
}
#signupmenu:hover{
    background-color: #ddd;
    color: black;
}
#signupmenu:hover #signup{
    background-image: linear-gradient(#ddd,#ddd),radial-gradient(circle at top left,#F4A0FF, #C8BFE7, #99D9EA);
}
<body>
    <div id="menu">
        <a id="logo" href="#logo"><img id="logopic" src="logo.png"></a>
        <a class="leftmenu" href="#home">Home</a>
        <a class="leftmenu" href="#News">News</a>
        <a class="leftmenu" href="#About">About</a>
        <a class="leftmenu" href="#Contact">Contact</a>
        <a id="signupmenu" href="#Contact"><span id="signup"><span id="spansignup">Sign-up</span></span></a>
    </div>
</body>

推荐阅读