利用原生JavaScript编写一个点击切换显示或隐藏功能-创新互联
打开
css:
* { margin:0; padding:0; } #header { width:100%; height:50px; background-color:cadetblue; text-align:center; color:white; position:relative; overflow:hidden; transition:all 0.5s; } #header>p { line-height:50px; } .close { position:absolute; right:5%; top:0; padding:10px; line-height:30px; cursor:pointer; } .open { position:absolute; right:5%; padding:10px; line-height:30px; background-color:cadetblue; cursor:pointer; transition:all 0.5s; color:white; }
js:
var oDiv = document.getElementById("header"); var oOpen = document.getElementsByClassName("open"); var oDivheight = oDiv.offsetHeight; var oOpenheight = oOpen[0].offsetHeight; oOpen[0].style.top = `-${oOpenheight}px`; function closeTask() { oDiv.style.height = "0"; oOpen[0].style.top = "0"; } const openTask = () => { oDiv.style.height = `${oDivheight}px`; oOpen[0].style.top = `-${oOpenheight}px`; }
看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注创新互联行业资讯频道,感谢您对创新互联网站建设公司,的支持。
分享文章:利用原生JavaScript编写一个点击切换显示或隐藏功能-创新互联
网页链接:http://ybzwz.com/article/dhdssi.html