Question

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

Answer 1

作为必须获取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","");

<强>演示

＆＃13;

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

＆＃13;

#dropMenu li {
   opacity:1;  
}

#dropMenu.hideli li {
   opacity:0;  
}

＆＃13;

<div id="dropMenu">
   <ul>
     <li>Li 1</li>
     <li>Li 2</li>
     <li>Li 3</li>
     <li>Li 4</li>
   </ul>  
</div>

＆＃13;

Answer 2

是的，这是可能的，但需要一些额外的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 (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;
})

Answer 3

在js中你可以把它写成

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

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

Answer 4

您的getElementById('dropMenu')没问题，那么您可以添加＆＃34;子查询＆＃34;对于所有li元素，并扫描它：

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

Answer 5

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

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

如何使用getElementId和ID的元素

5 个答案: