通过更改style样式控制元素的属性
<script language="javascript" type="text/javascript">
function test(eventObj){
//通过更改style设定控制div
//如何知道是哪个button被按下
if(eventObj.value=="黑色"){
var divColor = document.getElementById('div1');
divColor.style.backgroundColor = "black";
}
else if(eventObj.value=="红色"){
var divColor = document.getElementById('div1');
divColor.style.backgroundColor = "red";
}
}
</script>
</head>
<body>
<div id="div1" class="div1" style="width:500px;height:400px;border:1px solid ;background-color:red">
</div>
<input type="button" value="黑色" οnclick="test(this)"/>
<input type="button" value="红色" οnclick="test(this)" />
</body>
经测试上述方法也可以更改CSS文件中的设定(有可能是浏览器版本的问题)
通过更改外部CSS文件样式更改元素属性
<link href="css_style.css" type="text/css" rel="stylesheet"/>
<title>Document</title>
<script language="javascript" type="text/javascript">
function test(eventObj){
var mydiv = document.getElementById('div1');
if(eventObj.value=="黑色"){
mydiv.setAttribute("class","div1");
}
else if(eventObj.value=="红色"){
mydiv.setAttribute("class","div2");
}
}
</script>
</head>
<body>
<div id="div1" class="div1">
</div>
<input type="button" value="黑色" οnclick="test(this)"/>
<input type="button" value="红色" οnclick="test(this)" />
</body>
CSS文件如下:
.div1{
width:500px;
height:400px;
border:1px solid;
background-color:black;
}
.div2{
width:500px;
height:400px;
border:1px solid;
background-color:red;
}