TypechoJoeTheme

徐伟轩 - 一个爱音乐的有趣程序员|不仅只关注网站设计开发

统计

原生js方式控制元素显示隐藏代码

徐伟轩博主
2020-10-21
/
0 评论
/
123 阅读
/
126 个字
/
百度已收录
10/21

在网页中,有时候我们需要隐藏某个内容如div,那就需要让这个元素隐藏或显示。这样的网页效果,其实通过原生JS即可实现。
原生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名称就可以了。

网页代码
朗读
赞(0)
赞赏
感谢您的支持,我会继续努力哒!
版权属于:

徐伟轩 - 一个爱音乐的有趣程序员|不仅只关注网站设计开发

本文链接:

https://www.letus.top/archives/64.html(转载时请注明本文出处及文章链接)

如需商业转载或刊登,请联系原作者获得授权。

署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)

评论 (0)

广告位

人生倒计时

今日已经过去小时
这周已经过去
本月已经过去
今年已经过去个月

标签云