HTML页面引入样式，有三种方式：
1、外部样式(external stylesheet):如果很多网页需要用到同样的样式(Styles)，将样式(Styles)写在一个以.css为后缀的CSS文件里，然后在每个需要用到这些样式(Styles)的网页里引用这个CSS文件。
2、内部样式(internal stylesheet):是写在HTML的<head></head>里面的，内部样式只对所在的网页有效。
3、内嵌样式(inline style):是写在Tag里面的，内嵌样式只对所有的Tag有效。
当然三种样式的优先级也不是不同的，一般来说，（外部样式）External style sheet <（内部样式）Internal stylesheet <（内联样式）Inlinestyle，当然这样的条件是引进的外部样式位置是位于内部样式之前的。
获取样式：
获取元素的样式属性值：
在IE下，有style、currentStyle、runtimeStyle三种，style只能获取内联样式，currentStyle获取最终样式，runtimeStyle是位于三种样式之上的样式，设置了只能用currentStyle和runtimeStyle访问到，相当于是设置了tag的内联样式，但是style访问不到，最好对于一个DOM元素设置了，也用runtimeStyle访问。
在W3C下，也能用style访问内联样式，最终样式document.defaultView.getComputedStyle(elem, null).getPropertyValue(name)访问到。
下面列出总结的获取样式注意的问题：
1.float属性，在IE下要通过styleFloat才能访问到，关于cssFloat,说是标准写法，可是我测试未在FF下不起作用，返回为空值。
2.opacity属性,IE下filter:alpha(opacity=10);标准为opacity:0.1;
3.font-size等中间有横杠之类的属性，IE下要变成驼峰类的形式，FF不用（暂时测试）。
4.当width或者height的值为百分数，或者有"auto"时，需要手动计算值。
下面写出自己的暂时未发现兼容性的获取样式方法，如果发现再补充。
//首字母大写 width返回Width
function capitalize (args){
return args.charAt(0).toUpperCase()+args.substr(1).toLowerCase();
}
//判断数组是否包含该元素
function filters(arr,value){
return arr.toString().indexOf(value)>=0;
}
//margin-top变为marginTop
function camelize(param){
return param.replace(/-(\w)/,function($1,$2){
return $2.toUpperCase();
});
}
function getCss(elem,styles){
var value;
//处理float
if(styles=='float'){
styles=document.defaultView && document.defaultView.getComputedStyle?styles:'styleFloat';
}
if(document.defaultView && document.defaultView.getComputedStyle){
value=document.defaultView.getComputedStyle(elem, null).getPropertyValue(styles);
}else{
styles=camelize(styles);
value=(styles=='opacity')?/opacity=([^)]*)/.test(elem.currentStyle["filter"])?(parseFloat(RegExp.$1)*0.01):1:elem.currentStyle[styles];
}
//处理"auto"跟百分数
if((value=="auto"||value.toString().indexOf("%")>=0)&&filters(["width","height"],styles)){
value=elem["offset"+capitalize(styles)]+"px";
}
return value;
}
关于clss的获取放到后面与设置一起讨论。
设置样式：
设置样式同样包括设置三种样式，外部、内部与内联。
内联样式：
通过elem.style.border="1px solid red"或者
elem.style.cssText ="border:1px solid red;color:#000;background:#444;float:left";
当然在通过第一种方式的时候会涉及到兼容性的问题，例如
1.float在IE下为styleFloat,FF下为cssFloat
2.margin-top这种需要转换为驼峰格式 marginTop
3.opacity的问题
因此现在设计修正上面三个兼容性的问题，代码为下
function setCss(elem,name,value){
//如果只穿两个参数
if(arguments.length==2){
//如果传进来的cssText
if(typeof elem=="string")
elem.style.cssText=name;
else{
for(var property in name)
myStyle(elem,property,name[property]);
}
}else
myStyle(elem,name,value);
//设置单个样式
function myStyle(elem,name,value){
if(name=='float')
name=document.defaultView && document.defaultView.getComputedStyle?'cssFloat':'styleFloat';
if(name='opacity')
elem.style.filter = 'alpha(opacity=' + value * 100+ ')';
else
elem.style[camelize(name)] = value;
}
}
内部样式：
在设置外部样式，就是对页面style元素的添加或者增加元素
展示示例代码
function addSheet(cssText){
var doc=document;
if(!+"\v1"){ //这个判断是否为IE浏览器，到处见到，这里再记下原理
//IE下\v不会转义得到的结果为v,其它浏览器得到垂直制表符，相当于空格，前面+号会去转变为数字，明显IE下v1得不到数字，会变成NaN，则返回false,
//其余浏览器1，则会是true
var filter=cssText.match(/opacity:(\d?\.\d+);/); //这个正则表达式，非贪婪匹配第一个数字，因为opacity最大值为1，然后才是小数点及后面的值
if(filter!=null){
cssText=cssText.replace(filter[0],"filter:alpha(opacity="+ parseFloat(filter[1]) * 100 + ")");
}
}
var style=doc.createElement("style");
style.setAttribute("type", "text/css");
if(style.styleSheet){// IE
style.styleSheet.cssText = cssText;
} else { // w3c
var cssNode = doc.createTextNode(cssText);
style.appendChild(cssNode);
}
var heads = doc.getElementsByTagName("head");
if(heads.length)
heads[0].appendChild(style);
else
doc.documentElement.appendChild(style);
}外部样式就是通过head获取style然后再添加样式，处理的最多还是IE与W3C的兼容性
外部样式
function addLink(url){
var doc=document;
var link=doc.createElement("link");
link.setAttribute("rel", "stylesheet");
link.setAttribute("type", "text/css");
link.setAttribute("href", url);
var heads = doc.getElementsByTagName("head");
if(heads.length)
heads[0].appendChild(link);
else
doc.documentElement.appendChild(link);
}样式名称的操作
四个方法，获取，判断，添加，移除
function getClass(elem){
return elem.className.replace(/^\s\s*|\s\s*$/g,'').replace(/\s+/," ").split(" ");
}
function hasClass(elem,name){
return new RegExp('(\\s|^)'+name+'(\\s|$)').test(elem.className); //\在引号内，要多加一个\转义一次
}
function addClass(elem,name){
if(!hasClass(elem,name))
elem.className+=" "+name;
}
function removeClass(elem,name){
if(hasClass(elem,name)){
elem.className=elem.className.replace(new RegExp('(\\s|^)'+name+'(\\s|$)')," ");
}
}
