利用原生JavaScript编写一个点击切换显示或隐藏功能-创新互联
利用原生JavaScript编写一个点击切换显示或隐藏功能?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。
在衢江等地区,都构建了全面的区域性战略布局,加强发展的系统性、市场前瞻性、产品创新能力,以专注、极致的服务理念,为客户提供成都网站设计、成都网站制作 网站设计制作定制设计,公司网站建设,企业网站建设,高端网站设计,网络营销推广,成都外贸网站建设,衢江网站建设费用合理。html:
点击切换显示隐藏
关闭打开
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://azwzsj.com/article/dhdssi.html