JavaScript原生代码实现元素显示与隐藏

发布时间：2024-01-05  栏目：建站知识   浏览：   分类：js教程 js代码

要使用原生JavaScript控制元素的显示和隐藏，可以通过修改元素的`style.display`属性来实现。以下是一个简单的示例： ```javascript // 获取元素 var element = document.getElementById("myElement"); // 显示元素 element.style.display = "block"; // 隐藏元素 element.style.display = "none"; ``` 在这个示例中，我们首先通过`getElementById`方法获取了一个ID为`myElement`的元素。然后，我们分别将`style.display`属性设置为`block`和`none`来控制元素的显示和隐藏。

原生JS控制元素显示隐藏代码，这里就不分享其他的代码了，以免小白看晕了。

varobox=document.getElementById("logo");varodown=document.getElementById("side-item");obox.onclick=function(){if(document.getElementById("side-item").style.display=='none'){odown.style.display="block";document.getElementById("logo").classList.add("no");}else{odown.style.display="none";document.getElementById("logo").classList.remove("no");}}

说明一下：logo是点击触发的元素，side-item是需要显示隐藏的元素，no是触发事件后给logo加的样式。

只需要对着说明改ID名称就可以了，在看不懂就没什么可说的了。