通过js动态的修改样式
更新样式的方法：一、使用.style方法修改样式，缺点是使样式混杂在js中，再次修改不易。二、更新class属性，更改样式。三、一次性更改很多元素样式（如换肤操作），更改样式表。
设置HTML样式有三种方式：行内样式，内嵌样式，外部样式
一、访问元素的样式
element.style获得的样式只能是行内样式，获得不了外部样式表或嵌入样式表经层叠而来的样式
var style=window.getComputedStyle(element).color 可以获取实际样式（IE9以下不兼容）,获取行内样式，行内样式没有则获取样式表中的样式
如何实现浏览器兼容版的window.getComputedStyle
window.getComputedStyle能够获取元素的实际样式，但是低版本的ie8及以下不支持，如何在低版本的ie上兼容类似的功能。
function getComputedStyle(element) {
if(window.getComputedStyle) {
return window.getComputedStyle(element);
} else {
return element.currentStyle;
}
}
实现getStyle函数getStyle函数用于获取元素的实际样式，语法如下：var cssPropertyValue = getStyle (element, cssPropertyName)；
使用示例如下：
getStyle(element, "color") 返回element元素的显示颜色，如："rgb(0, 0, 0)"
getStyle(element, "line-height") 返回element元素的实际行高，如："30px" 请实现getStyle函数，要求浏览器兼容。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
#p1 { 100px;height: 200px;color: #09c;}
</style>
</head>
<body>
<p id="p1" style="margin:10px;">HHHH</p>
<script>
function getStyle(obj, attr)
{
if(obj.currentStyle)
{
return obj.currentStyle[attr]; //只适用于IE
}
else
{
return getComputedStyle(obj,false)[attr]; //只适用于FF,Chrome,Safa
}
return obj.style[attr]; //本人测试在IE和FF下没有用,chrome有用
}
window.onload=function()
{
//调用
var oDiv=document.getElementByIdx_x('p1');
//alert(getStyle(oDiv,'width'));
alert(getStyle(oDiv,'margin-left'));
}
//查询了相关资料发现问题如下：
//style只能获取元素的内联样式，内部样式和外部样式使用style是获取不到的。 （这里我测试的在IE和FF下没有用，Chrome下有用，所有有歧义）
//currentStyle可以弥补style的不足，但是只适用于IE。
//getComputedStyle同currentStyle作用相同，但是适用于FF、opera、safari、chrome。
//
//注意：
//currentStyle和getComputedStyle只能用于获取页面元素的样式，不能用来设置相关值。
//如果要设置相应值，应使用style。
</script>
</body>
</html>