JS修改css样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<style type="text/css">
#box1{
width: 200px;
height: 200px;
background-color:red !important;
}
</style>
<script type="text/javascript">
window.onload=function(){
/*
* 点击btn,修改BOX1的大小size
*/
//获取box1
var box1=document.getElementById("box1");
//获取按钮并绑定响应函数
var btn1=document.getElementById("btn01");
btn1.onclick=function(){
/*
* 修改box1的大小
* 语法:
* 元素.style.样式名=样式
* css中,-是在js是、中不合法的,要将-变为驼峰命名法
* background-color变为backgroundColor
* 通过style修改的样式是内联样式,有较高的优先级,所以通过的js修改的
* 的样式会立即显示
* 方法:要在样式中写:!important,那么此时央视就会较高的优先级,即使js修改,也不会覆盖,这就会
* 导致js修改的样式失效,一般不要添加!important
*/
box1.style.width="400px";
box1.style.height="400px";
box1.style.backgroundColor="green";
};
var btn02=document.getElementById("btn02");
btn02.onclick=function(){
alert(box1.style.width);
};
}
</script>
<body>
<button id="btn01">点击</button>
<button id="btn02">获取信息</button>
<div id="box1">
</div>
</body>
</html>
结果