js改变css属性
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
#box{
width:100px;height:100px;background:red;margin:20px 80px;
}
</style>
</head>
<body>
<div id="box"></div>
<input type="button" value="变高" onclick="changeHeight()">
<input type="button" value="变宽" onclick="changewidth()">
<input type="button" value="背景色" onclick="changebackground()">
<input type="button" value="改变形状" onclick="changecicrl()">
<input type="button" value="显示" onclick="display()">
<input type="button" value="隐" onclick="nodisplay()">
<script type="text/javascript">
var box;
window.onload=function(){
box=document.getElementById('box');
}
function changeHeight(){
box.style.height="200px";
}
function changewidth(){
box.style.width="200px";
}
function changebackground(){
box.style.background='pink';
}
function changecicrl(){
box.style.borderRadius='50%';
}
function display(){
box.style.display='block';
}
function nodisplay(){
box.style.display='none';
}
</script>
</body>
</html>