[英]Change class child property using 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;
}
#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";
}
}
我嘗試使用“for”語句，但無法處理我的代碼。
這是因為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>
如何使用JavaScript動態更改CSS類的屬性（無JQuery）
[英]How to change a property of a CSS class dynamically using javascript (no JQuery)
有沒有改變JavaScript對象的內部[[Class]]屬性？
[英]Is there away to change the internal [[Class]] property of a JavaScript Object?
如何檢查屬性是否僅屬於Java語言的子類或子類？
[英]How to check if property only belongs to the child class or subclass in Javascript?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.