JS修改ID属性

Original 2019-03-13 09:34:08 561
abstract:<!doctype html><html><head><meta charset="utf-8"><title>JS-demo</title><style>#box{width:300px;height:300px; background:#D11619;}</style></

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>JS-demo</title>

<style>

#box{width:300px;height:300px; background:#D11619;}

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

</body>

<script type="application/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="pink"

}

function dd(){

box.style.height="300px"

box.style.width="300px"

box.style.background="#D11619"

}

function ee(){

box.style.display="none"

}

function ff(){

box.style.display="block"

}

</script>

</html>


Correcting teacher:韦小宝Correction time:2019-03-14 09:06:56
Teacher's summary:写的很不错 使用JavaScript动态的来修改标签的样式还可以做成动画的效果

Release Notes

Popular Entries