使用javascript更改类子属性
所以我目前正在学习在向下滚动时缩小我的菜单高度，但我似乎无法找到为什么我不能更改菜单按钮上的填充高度，它在我的 html 上被命名为“leftmenu”类。所以这是我的代码。抱歉，我正在学习草率的代码。
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;
}
ibeautiful1回答
-
大话西游666
它是因为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>
随时随地看视频慕课网APP
相关分类
JavaScript