原生js的onclick点击事件 修改属性里面的值

原创 2019-03-05 12:27:15 755
摘要:<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <style type="text/css"> #box{width: 100px;height: 100px;background: r

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<style type="text/css">

#box{width: 100px;height: 100px;background: red;margin:20px 80px;}

</style>

</head>

<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="gg()">

<script type="text/javascript">

var box

window.onload=function () {

box=document.getElementById('box')

}

function aa(){

box.style.height="400px"//改变高度

}

function bb(){

box.style.width="400px"

}

function cc(){

box.style.background="blue"

}

function dd(){

box.style.height="100px"

box.style.width="100px"

box.style.background="red"

}

function ee(){

box.style.display="none"

}

function gg(){

box.style.display="block"

}

</script>

</body>

</html>


批改老师:天蓬老师批改时间:2019-03-05 13:27:38
老师总结:下次的作业 , 可以有点创意 , 一开始模仿是可以的

发布手记

热门词条