一、操作内联样式
内联样式：<div id="box1" style="width: 300px; height: 300px;"></div>
语法：语法：元素.style.样式名 = 样式值
--注意：
如果CSS样式名中含有-，需要将样式名修改为驼峰命名，
如：background-color 应写成 backgroundColor。
--我们通过style属性读取(无法读取内联表的样式)和设置的样式都是内联样式，
而内联样式有较高的优先级，所以通过js修改的样式往往会立即显示
完整测试代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box1{
width: 100px;
height: 100px;
background-color: yellow;
}
</style>
<script type="text/javascript">
window.onload = function(){
/**
* 点击按钮时 ， 改变div的样式
*/
var btn01 = document.getElementById("btn01");
var box1 = document.getElementById("box1");
//为btn绑定单击响应函数
btn01.onclick = function(){
/**
* 通过js修改元素样式:
* 语法：元素.style.样式名 = 样式值
* 注意：
* 如果CSS样式名中含有-，需要将样式名修改为驼峰命名
* 如：background-color 应写成 backgroundColor
*/
box1.style.width = "300px";
box1.style.height = "300px";
box1.style.backgroundColor = "red !important";
//!important 有最高优先级，这里使用了它，会导致颜色样式修改失败
};
};
</script>
</head>
<body>
<div id="box1">
</div>
<br><button type="button" id="btn01">
点我一下
</button>
</body>
</html>
二、获取当前元素正在显示的样式
样式表样式：
<style type="text/css">
#box1{
width: 100px;
height: 100px;
background-color: yellow;
}
</style>
（1）/**
* 获取元素当前显示的样式
* 语法：元素.currentStyle.样式名
* 但currentStyle只有IE支持
*/
// alert(box1.currentStyle.backgroundColor);
（2）/**
* 在其他浏览器中可以使用
* getComputedStyle()方法来获取当前元素的样式
* 这个方法是window的方法，可以直接使用
* 它需要两个参数：
* 一、要获取样式的元素
* 二、传递一个伪元素，一般都传null
*/
（3）/**
* 自定义一个函数 获取指定元素当前样式
*/
function getStyle(obj,styleName){
if (window.getComputedStyle) {
//正常浏览器方式
return getComputedStyle(obj,null)[styleName];
}else{
//IE8方式，没有getComputedStyle()方法
return obj.currentStyle[styleName];
}
}
全部代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box1{
width: 100px;
height: 100px;
background-color: yellow;
}
</style>
<script type="text/javascript">
window.onload = function(){
/**
* 点击按钮时 ， 改变div的样式
*/
var btn01 = document.getElementById("btn01");
var box1 = document.getElementById("box1");
//为btn绑定单击响应函数
btn01.onclick = function(){
/**
* 通过js修改元素样式:
* 语法：元素.style.样式名 = 样式值
* 注意：
* 如果CSS样式名中含有-，需要将样式名修改为驼峰命名
* 如：background-color 应写成 backgroundColor
*/
box1.style.width = "300px";
box1.style.height = "300px";
box1.style.backgroundColor = "red !important";
//!important 有最高优先级，这里使用了它，会导致颜色样式修改失败
};
var btn02 = document.getElementById("btn02");
var box1 = document.getElementById("box1");
//为btn绑定单击响应函数
btn02.onclick = function(){
/**
* 获取元素当前显示的样式
* 语法：元素.currentStyle.样式名
* 但currentStyle只有IE支持
*/
// alert(box1.currentStyle.backgroundColor);
/**
* 在其他浏览器中可以使用
* getComputedStyle()方法来获取当前元素的样式
* 这个方法是window的方法，可以直接使用
* IE8以上才有这个方法
* 它需要两个参数：
* 一、要获取样式的元素
* 二、传递一个伪元素，一般都传null
*/
// var obj = getComputedStyle(box1,null);
// alert(obj["width"]); //与obj.width等同
var result = getStyle(box1,"width");
alert(result);
};
};
/**
* 自定义一个函数 获取指定元素当前样式
*/
function getStyle(obj,styleName){
if (window.getComputedStyle) {
//正常浏览器方式
return getComputedStyle(obj,null)[styleName];
}else{
//IE8方式，没有getComputedStyle()方法
return obj.currentStyle[styleName];
}
}
</script>
</head>
<body>
<div id="box1">
</div>
<br><button type="button" id="btn01">
获取内联样式
</button>
<button type="button" id="btn02">获取当前样式</button>
</body>
</html>
