サマリー:<!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里面的元素也會被一起隱藏。在實際項目中,我想這應該可以應用到很多地方。
添削の先生:韋小寶添削時間:2019-01-14 09:56:57
先生のまとめ:是的 實際上這些看似很基礎的東西在實際項目中運用的場景還是很多的 基礎要多練習才能牢牢掌握哦