abstract:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,&
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style type="text/css"> #box{width:100px;height:100px;background:red;} div{margin:20px 80px;} </style> </head> <body> <div class="" id="xx"> <img id="box" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547399382580&di=c3ee82baef71e4aafde9268e9820a740&imgtype=0&src=http%3A%2F%2Fwww.asiafinance.cn%2Fu%2Fcms%2Fwww%2F201612%2F13093246x6zz.jpg" alt=""> </div> <input type="button" name="" value="变高" onclick="aa()"> <input type="button" name="" value="变宽" onclick="bb()"> <input type="button" name="" value="变色" onclick="cc()"> <input type="button" name="" value="重置" onclick="dd()"> <input type="button" name="" value="隐藏" onclick="ee()"> <input type="button" name="" value="显示" onclick="ff()"> <script type="text/javascript"> var box,xx window.onload=function (){ box=document.getElementById('box') xx=document.getElementById('xx') } function aa(){ //变高 box.style.height="300px" } function bb(){ //宽度 box.style.width="300px" } function cc(){ //改变颜色 box.style.background="pink" } function dd(){ box.style.width="100px" box.style.height="100px" box.style.background="red" xx.style.display=""; } function ee(){ //显示 xx.style.display="none"; } function ff(){ //隐藏 xx.style.display="block"; } </script> </body> </html>
如果隐藏DIV的话,DIV里面的元素也会被一起隐藏。在实际项目中,我想这应该可以应用到很多地方。
Correcting teacher:韦小宝Correction time:2019-01-14 09:56:57
Teacher's summary:是的 实际上这些看似很基础的东西在实际项目中运用的场景还是很多的 基础要多练习才能牢牢掌握哦