gpt4 book ai didi

javascript - 如何在和 ID 的元素上使用 getElementId

转载 作者:太空宇宙 更新时间:2023-11-03 23:26:52 27 4
gpt4 key购买 nike

基本上,我在 CSS 中有一个 Id 元素,我试图通过 JavaScript 与之交互。所以我想使用:

document.getElementById('dropMenu').style.opacity = '0';

#dropMenu li {
opacity: 1;
}

但我不知道如何具体地与 li 部分交互,这可能吗?

谢谢,詹姆斯

HTML

<html>
<head>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href="./stylesheet.css" type="text/css" rel="stylesheet">
<title>Index</title>
<script>
function dropMenu(){
if (document.getElementById('dropMenu').style.height != '151px')
{
document.getElementById('dropMenu').style.height = '151px';
document.querySelectorAll('dropMenu li').style.opacity = '1';
console.log("showingObj");
}
else
{
document.getElementById('dropMenu').style.height = '0px';
document.querySelectorAll('dropMenu li').style.opacity = '0';
console.log("hideObj:");
}
}
</script>
</head>
<body>
<nav>
<div id="mainMenu">
<i class="fa fa-bars" onclick="dropMenu()"></i><p>Page Title</p>
</div>
<div id="dropMenu">
<ul>
<li>
<i class="fa fa-pencil fa-5x" id="dm1" style="background: #00bcd4;"></i>
<p style="background: #00acc1;">Projects</p>
</li>
<li>
<i class="fa fa-film fa-5x" id="dm1" style="background: #8bc34a;"></i>
<p style="background: #7cb342;">Media</p>
</li>
<li>
<i class="fa fa-camera-retro fa-5x" id="dm1" style="background: #ffc107;"></i>
<p style="background: #ffb300;">Photography</p>
</li>
<li>
<i class="fa fa-info-circle fa-5x" id="dm1" style="background: #e51c23;"></i>
<p style="background: #dd191d;">About Me</p>
</li>
</ul>
</div>
</nav>
</body>

最佳答案

作为必须获取 li 列表、遍历它并以编程方式设置样式的替代方法,您可以使用 classList add/remove methods 在 dropMenu 元素上添加/删除一个类。 , 或者如果支持旧浏览器操作 className 属性

CSS

#dropMenu li {
opacity: 1;
}

#dropMenu.hideli li {
opacity: 0;
}

JS

//to add
document.getElementById("dropMenu").classList.add("hideli");
//to remove
document.getElementById("dropMenu").classList.remove("hideli");

//Quick and dirty could be improved
var ele = document.getElementById("dropMenu");
//to add
ele.className += " hideli";
//to remove
ele.className = ele.className.replace("hideli","");

演示

setTimeout(function(){
document.getElementById("dropMenu").classList.add("hideli");
},1000);

setTimeout(function(){
document.getElementById("dropMenu").classList.remove("hideli");
},3000);
#dropMenu li {
opacity:1;
}

#dropMenu.hideli li {
opacity:0;
}
<div id="dropMenu">
<ul>
<li>Li 1</li>
<li>Li 2</li>
<li>Li 3</li>
<li>Li 4</li>
</ul>
</div>

关于javascript - 如何在和 ID 的元素上使用 getElementId,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26617113/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com