js控制div样式

原创 2019-01-02 23:21:08 347
摘要:代码如下:<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style type="text/css">#box{width: 100px;height: 100px;backgr

代码如下:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

<style type="text/css">

#box{width: 100px;height: 100px;background-color:red; margin: 50px 80px;}

</style>

</head>

<body>

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

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

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

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

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

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

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

<script type="text/javascript">

var box

window.onload=function () {

box=document.getElementById('box')

}

function hei() {

box.style.height="500px"

}

function wid() {

box.style.width="500px"

}

function col() {

box.style.background="green"

}

function res() {

box.style.height="100px"

box.style.width="100px"

box.style.background="red"

}

function hid() {

box.style.display="none"

}

function dis() {

box.style.display="block"

}

</script>

</body>

</html>

总结:复习了函数的定义,变量的声明,函数的执行

1、定义函数用function 函数名称(){ 函数体}

2、window.onload=function(){}: 表示页面加载完成时加载函数

3、onclick=“函数名称()”单击时执行函数

批改老师:灭绝师太批改时间:2019-01-03 09:11:15
老师总结:onclick=“函数名称()”单击时执行函数(这是一个匿名函数奥!)完成的不错,继续加油!

发布手记

热门词条