摘要：<!doctype html><html><head><meta charset="UTF-8"><title>用JavaScript给不CSS样式</title><style>#box1{width: 150px;height: 150px;background: red;border:2px
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>用JavaScript给不CSS样式</title>
<style>
#box1{width: 150px;height: 150px;background: red;border:2px solid blue;}
</style>
</head>
<body>
<script>
var box;
window.onload=function(){
box=document.getElementById("box1");
}
function biankuan(){
box.style.width="400px";
}
function biangao(){
box.style.height="400px";
}
function biandise(){
box.style.background="pink";
}
function bianyuanjiao(){
box.style.borderRadius="20px";
}
function huifu(){
box.style.width="150px";
box.style.height="150px";
box.style.background="red";
box.style.border="2px solid blue";
box.style.borderRadius="0px";
}
function yincang(){
box.style.display="none";
}
function xiansh(){
box.style.display="block";
}
</script>
<h2>演示用JavaScript改变元素的CSS样式</h2><br>
<div id="box1"></div><br>
<input type="button" value="变 宽" onclick="biankuan()">
<input type="button" value="变 高" onclick="biangao()">
<input type="button" value="变底色" onclick="biandise()">
<input type="button" value="变圆角" onclick="bianyuanjiao()">
<input type="button" value="恢复原样" onclick="huifu()">
<input type="button" value="隐 藏" onclick="yincang()">
<input type="button" value="显 示" onclick="xiansh()">
</body>
</html>
批改老师：灭绝师太批改时间：2019-03-08 09:30:31
老师总结：案例可以自己课外拓展,跳出老师上课代码哦!
