返回改变DIV样式......登陆

改变DIV样式作业

末幽客2018-12-19 08:53:41201

以前不知道什么时候该用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>


最新手记推荐

• 用composer安装thinkphp框架的步骤• 省市区接口说明• 用thinkphp,后台新增栏目• 管理员添加编辑删除• 管理员添加编辑删除

全部回复(0)我要回复

暂无评论~
  • 取消回复发送