转行学开发，代码100天——2018-04-11
通过JavaScript获取和修改HTML元素及CSS属性是其一个基本功能。对于CSS样式通常有行内样式，外部样式，内嵌样式之分。
如：
行内样式：
<div id="box" style=" 100px;height: 100px;background:#ccc"></div>
外部样式：
<link rel="stylesheet" type="text/css" href="ccss.css">
内嵌样式：
<style type="text/css"> #div{width:100px;height:100px;background:red;} </style>
对于样式的获取也因其写入方式不同而有所区别：
对于行内样式的获取，用 obj.style.属性方式
如下面的一个获取和修改行内样式的案例：
<!DOCTYPE html> <html> <head> <title>JavaScript获取样式的方式</title> <script type="text/javascript"> //css样式获取和修改方法，两个参数时，获取；三个参数时修改 function css(obj){ alert(arguments[0]); if (arguments.length==2) { return arguments[0].style[arguments[1]]; }else { arguments[0].style[arguments[1]] = arguments[2]; } } //封装获取元素方法 function $(id){return document.getElementById(id);} window.onload =function () { var box = $('box'); alert(css(box,"width"));//获取 css(box,"width","200px");//设置属性 } </script> </head> <body> <div id="box" style=" 100px;height: 100px;background:#ccc"></div> </body> </html>
通过css函数技能获取样式也能修改样式，其前提是基于获取的HTML对象obj
function css(obj){ alert(arguments[0]); if (arguments.length==2) { return arguments[0].style[arguments[1]]; //获取样式 }else { arguments[0].style[arguments[1]] = arguments[2]; //修改样式 } }
为了使用方便，提升函数的通用性，可以将该函数进一步优化，增加obj,name,value参数
//css样式获取和修改方法，两个参数时，获取；三个参数时修改 function css(obj,name,value){ // alert(arguments[0]); //arguments[0]=obj if (arguments.length==2) { return obj.style[name]; //获取样式 }else { obj.style[name] = value; //修改样式 } }
非行间样式：obj.style.属性 方式并不适用与非行间样式
“好东西一般不兼容”
在用currentStyle() 与getComputedStyle() 获取非行间样式时需要考虑兼容性问题，而浏览器的兼容性问题一般都是通过if..else条件语句实现。
obj.currentStyle[attr] 兼容IE6、7、8
getComputedStyle(obj,false)[attr] 不兼容IE6、7、8
//获取样式 function getStyle(obj){ alert(obj.currentStyle);//考虑兼容性问题 if (obj.currentStyle) { alert(obj.currentStyle.width); }else{ alert(getComputedStyle(obj,false).width); } }
优化该函数后如下：
//获取样式 function getStyle(obj,name){ // alert(obj.currentStyle);//考虑兼容性问题 if (obj.currentStyle) { return obj.currentStyle[name]; }else{ return getComputedStyle(obj,false)[name]; } }
但是currentStyle() 与getComputedStyle() 方式只能用于获取样式，而不能设置样式
此外：
currentStyle()方式只能获取简单样式（height，width等），不能用于获取复合样式（border,background）等，若需要获取背景颜色，可以用backgroundcolor
总结：
1.行内样式：obj.style.属性
2.非行内样式:obj.currentStyle[attr] 兼容IE6、7、8
getComputedStyle(obj,false)[attr] 不兼容IE6、7、8
3.兼容性问题基本上都是通过if...else条件语句实现
4.currentStyle（）方式不能获取复合样式。