如何在 IT 元素上使用 getElementbyId答案

【问题标题】：How to use getElementId on and ID's Element如何在 IT 元素上使用 getElementbyId
【发布时间】：2014-12-24 09:01:24
【问题描述】：

基本上，我在 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>

【问题讨论】：

向我们展示您的 thml 代码，您可以在其中定义该 li 的 id。别忘了，id 应该是唯一的。
li { background-color: rgba(0,0,0,0); } 见：CSS 3 Opacity for List but not text
您能详细说明一下吗？
所以你想在你的元素中找到所有<li> 元素？你问过children数组了吗？
添加了 HTML。我正在尝试做的事情是改变我的 #dropMenu div 中的 4 个 li 项目的不透明度。

标签： javascript html css

【解决方案1】：

在js中可以写成

var elems = document.querySelectorAll('#dropMenu li');

for(var index = 0; index < elems.length; index++) {
   elems[index].style.opacity = 0;
}

【讨论】：

不，你不能。您可以使用document.querySelector(...).style.opacity` 设置第一个此类元素的样式，但不能使用querySelectorAll，因为它返回多个元素。
@HashemQolami 哎呀我忘了循环，已编辑

【解决方案2】：

你的getElementById('dropMenu')没问题，那么你可以为所有li元素添加“子查询”，然后扫描：

var dropmenu = document.getElementById('dropMenu');
var lis = dropmenu.getElementsByTagName('li');
for(var i = 0; i < lis.length; i++) {
    lis[i].style.opacity = 0;
}

【讨论】：

想添加一些解释或评论？仅代码的答案在这里不太受欢迎。您的答案被标记为删除，可能是因为没有一点解释或评论。

【解决方案3】：

使用 querySelectorAll 并循环遍历更改其样式的项目

var items = document.querySelectorAll('#dropMenu li');
for(var i=0;i<items.length;i++){
    items[i].style.opacity="1"
}

【讨论】：

【解决方案4】：

是的，这是可能的，但需要一些额外的 JavaScript

1) 将 getElementById 与 getElementsByTagName 一起使用

var parent = document.getElementById('dropMenu');
var children = parent.getElementsByTagName('li');

// Loop child elements here, using forEach...
Array.prototype.forEach.call(children, ...);

2) 使用 querySelectorAll

var children = document.querySelectorAll('#dropMenu li');

// Loop child elements here...
Array.prototype.forEach.call(children, ...);

3) 如果你愿意使用 jQuery，它很容易完成（类似于 querySelector）

$('#dropMenu li').each(...);

在 forEach（或标准的 forloop）中，您将直接与元素交互。

例如。使用标准 for 循环：

for (var i = 0, len = children.length; i < len; i++) {
    children[i].style.opacity = 0;
}

使用 forEach（如果您不介意兼容性问题）可能如下所示：

Array.prototype.forEach.call(children, function(el){
    el.style.opacity = 0;
})

【讨论】：

@HashemQolami 你是完全正确的，我完全是脑残。我已经更新以反映这一点（使用 Array.prototype.forEach 代替）

【解决方案5】：

作为必须获取 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>

【讨论】：