通过onclick点击触发事件改编元素syule属性值达到想要的结果

原创 2018-11-16 11:15:44 248
摘要:<!DOCTYPE html><html><head> <title>changr Div</title></head><style type="text/css">#box{ height:100px; width:100px; background:red; margin:20px 60px

<!DOCTYPE html>

<html>

<head>

<title>changr Div</title>

</head>

<style type="text/css">

#box{

height:100px;

width:100px;

background:red;

margin:20px 60px;

}

</style>


<body>

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

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

<input type="button" value="变长" onclick="bb()">

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

<input type="button" value="变圆" onclick="dd()">

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

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

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


<script type="text/javascript">

 var box

 window.onload=function(){

  box=document.getElementById("box")

 }

 function aa() {

  box.style.height="500px"

 }

 function bb(){

  box.style.width="500px"

 }

 function cc(){

  box.style.background="pink"

 }

 function dd(){

  box.style.borderRadius="250px"

 }

 function ee(){

  box.style.borderRadius="0px"

  box.style.background="red"

  box.style.width="100px"

  box.style.height="100px"

 }

 function ff(){

  box.style.display="none"

 }

 function gg(){

  box.style.display="block"

 }

</script>

</body>

</html>


批改老师:灭绝师太批改时间:2018-11-16 11:21:03
老师总结:完成的棒棒哒!还需要自己找点案例练练手,巩固一下

发布手记

热门词条