作者：nuysoft/高云 QQ：47214707 Email：[email protected]
声明：本文为原创文章，如需转载，请注明来源并保留原文链接。
jQuery源码分析系列（持续更新）
样式表
概述
如何使用
使用详解
特性对应的实现原理
源码分析
.css( name, value )
jQuery.style( elem, name, value, extra )
jQuery.css( elem, name, extra )
curCSS( elem, name )
概述
CSS操作部分的源码分析基于版本1.7.1，以后的jQuery源码分析系列将采用最新的版本。
jQuery.fn.css()主要解决了三个问题：
浏览器兼容：IE、W3C
兼容HTML样式属性和DOM样式属性：连词符、驼峰
使设置元素的样式属性变得快速简单：动态参数检测、设置和读取用统一的接口
如何使用
jQuery.fn.css()有4种用法，第一种是读取样式属性值，其余三种是设置样式属性值：
.css( propertyName ) 获取第一个元素的样式属性值，propertyName是CSS属性名
.css( propertyName, value ) 在匹配的元素集上设置一个CSS属性，value是要设置的属性值
.css( propertyName, function(index, value) ) 将函数返回值做为属性值设置
function(index, value) 返回要设置的属性值，函数的上下文this指向当前元素，接收两个参数：index是当前元素在集合中的下标位置；value是旧值，即当前值（意味着设置之前要先取出当前值）
.css( map ) 设置多个样式
map 含有键值对的map，键是属性名，值是字面直接量或函数
使用详解
读取和设置样式表遇到的难题是浏览器兼容性。例如访问样式属性时的方式就不同：
// 在基于标准的浏览器中 var defaultView = elem && elem.ownerDocument.defaultView; var computedStyle = defaultView && defaultView.getComputedStyle( elem, null ); var ret = computedStyle && computedStyle.getPropertyValue( name ); return ret; // 相对的在IE中 var ret = elem.currentStyle && elem.currentStyle[ name ] return ret;
另一个常见的兼容问题是，某些属性在不同的浏览器中使用不同的属性名，例如float，在IE的DOM实现中用styleFloat，而在遵守W3C标准的浏览器中是 cssFloat。
jQuery的.css()方法封装了这些差异，无论使用什么属性名都返回相同的结果。例如，一个向左浮动的元素，下边的三行代码每行都会返回字符串left：
$('div.left').css('float');
$('div.left').css('cssFloat');
$('div.left').css('styleFloat');
如果遇到由多个单词组成的属性，这些属性在CSS和DOM有着不一样的格式，jQuery也能等价的解释，例如：
.css( { 'background-color': '#ffe', 'border-left': '5px solid #ccc' } )
.css( { backgroundColor: '#ffe', borderLeft: '5px solid #ccc' } )
jQuery都能识别并返回正确的值，注意在DOM属性的引号是可选的，而CSS属性必须有引号，因为在属性名中有连字符-。
当使用.css()设置样式时，jQuery改变元素的样式属性style property，例如下面两行代码是等价的：
$('#mydiv').css('color', 'green')
document.getElementById('mydiv').style.color = 'green'
为样式属性设置一个空字符串，例如$('#mydiv').css('color', '')，如果这个属性是行内样式（HTML style attribute），这个属性会被从元素的style中移除，无论是通过.css()方法操作，还是直接操作DOM样式属性style（DOM style property）；但是如果是定义在外部样式表stylesheet或内部样式表