介绍
利用原生JavaScript编写一个点击切换显示或隐藏功能吗?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。
html:
& lt; div id=癶eader"比; ,& lt; p>点击切换显示隐藏& lt;/p> ,& lt; div 类=癱lose", onclick=癱loseTask()“在关闭& lt;/div> & lt;/div> & lt; div 类=皁pen", onclick=皁penTask()“在打开& lt;/div> css:
*, { ,保证金:0; ,填充:0; } # header { ,宽度:100%; ,高度:50 px; background - color,: cadetblue; ,text-align:中心; ,颜色:白色; ,位置:相对; ,溢出:隐藏; ,转型:all 0.5秒; } # header> p  { ,行高:50 px; } .close { ,位置:绝对; ,右:5%; ,上图:0; ,填充:10 px; ,行高:30 px; ,光标:指针; } .open { ,位置:绝对; ,右:5%; ,填充:10 px; ,行高:30 px; background - color,: cadetblue; ,光标:指针; ,转型:all 0.5秒; ,颜色:白色; }
js:
var oDiv =, . 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的; }
看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注行业资讯频道,感谢您对的支持。