改变DIV样式作业

Original 2018-12-19 08:53:41 199
abstract:以前不知道什么时候该用window.onload,工作中有时候遇到JS不执行,虽然知道页面没加载完JS没有找到对象,以前也只知道把JS移到最后面可以解决,现在知道可以加上window.onload,页面加载完执行,还是基础知识不太牢固<!doctype html><html> <head>  <meta charset="UT

以前不知道什么时候该用window.onload,工作中有时候遇到JS不执行,虽然知道页面没加载完JS没有找到对象,以前也只知道把JS移到最后面可以解决,现在知道可以加上window.onload,页面加载完执行,还是基础知识不太牢固

<!doctype html>

<html>

 <head>

  <meta charset="UTF-8">

  <meta name="Generator" content="EditPlus®">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <title>改变DIV样式作业</title>

 </head>

 <style>

 #box{width:100px;height:100px;background:#f00}

 </style>

 <body>

<div id="box"></div>


<input type="button" value="变宽" onclick='changeWidth()'>

<input type="button" value="变高" onclick='changeHeight()'>

<input type="button" value="变色" onclick='changeBgColor()'>

<input type="button" value="重置" onclick='reset()'>

<input type="button" value="隐藏" onclick='hide()'>

<input type="button" value="显示" onclick='show()'>


<script>

var box = document.getElementById('box');


function changeWidth(){

box.style.width='400px';

}


function changeHeight(){

box.style.height='400px';

}


function changeBgColor(){

box.style.backgroundColor='pink'

}


function reset(){

box.style.width='100px';

box.style.height='100px';

box.style.backgroundColor='red'

}


function hide(){

box.style.display='none';

}


function show(){

box.style.display='block';

}

</script>

 </body>

</html>


Correcting teacher:灭绝师太Correction time:2018-12-19 09:39:34
Teacher's summary:知识点不牢固的话,多练习就可以啦完成的不错,继续加油

Release Notes

Popular Entries