js教程

原生JS控制元素显示隐藏代码

精准像素 2020-10-18 人阅读

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

var obox = document.getElementById("logo");
var odown = 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名称就可以了,在看不懂就没什么可说的了。

相关推荐
  • JS代码
  • 网站禁止右键和复制JS代码

    这个其实很简单,一段JS代码就能禁止网页鼠标右键和复制了。测试了IE和谷歌浏览器,其他的没测试。<style type="text/css"> body { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; ...

    js教程 58 1年前
  • 查询百度收录量API接口代码

    显示百度收录最新的网页收录数,还在到处查网页百度收录有没有添加吗,那你就落后了,现在都是直接在网页显示百度收录的最新数量。使用直接在要显示的地址添加以下代码即可。<div id="mli"></div><script type="text/javascript">var url = &#39;https://...

    js教程 38 10个月前
  • 使用Chrome控制台快速查找调试JavaScript运行代码
    使用Chrome控制台快速查找调试JavaScript运行代码

    精准像素觉得Chrome是目前最好用的浏览器,写的网页时可以利用Chrome轻松找到对应的js动作的。Chrome内核给我们提供了非常强大的开发人员工具,使用它,我们可以提升很高的效率,下面就跟我一起学习下Ch...

    js教程 20 8个月前