引用JS自建函数改变css中样式

Original 2019-01-12 00:29:55 281
abstract:<!DOCTYPE html><html><head> <title>ccccccc</title> <meta charset="utf-8"> <style type="text/css"> #box{height: 100px;width: 100px;backgrou

<!DOCTYPE html>

<html>

<head>

<title>ccccccc</title>

<meta charset="utf-8">

<style type="text/css">

#box{height: 100px;width: 100px;background: red;}//声明div中idBOX的样式

</style>



<body>

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

<input type="button" value="变高" onclick="gao()">//通过onclick事件触发并引用函数实现效果

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

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

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

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

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

<script type="text/javascript">

var box //声明box引用以下全局变量

window.onload=function(){

box=document.getElementById("box")

}

function gao(){

box.style.height="300px"

}

function kuan(){

box.style.width="250px"

}

function se(){

box.style.background="pink"

}

function chongz(){

box.style.height="100px"

box.style.width="100px"

box.style.background="red"

}

function yin(){

box.style.display="none"

}

function xian(){

box.style.display="block"

}


</script>

</body>

</html>


Correcting teacher:灭绝师太Correction time:2019-01-12 09:17:30
Teacher's summary:完成的不错!作业是为了巩固知识点,确保知识点都有好好掌握哦!

Release Notes

Popular Entries