用JavaScript改变CSS样式
<!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>