jQuery css模塊用于css屬性的修改操作。

?

jQuery.fn.css

jQuery.fn.css = function( name, value ) {//又是用access來(lái)操作return jQuery.access( this, function( elem, name, value ) {var styles, len,map = {},i = 0;//如果name是數(shù)組if ( jQuery.isArray( name ) ) {//通過(guò)getStyles方法返回elem的stylesstyles = getStyles( elem );len = name.length;//創(chuàng)建對(duì)應(yīng)styles的處理函數(shù)mapfor ( ; i < len; i++ ) {map[ name[ i ] ] = jQuery.css( elem, name[ i ], false, styles );}return map;}//如果不是數(shù)組，則返回jQuery.style或jQuery.cssreturn value !== undefined ?jQuery.style( elem, name, value ) :jQuery.css( elem, name );}, name, value, arguments.length > 1 ); };

又是通過(guò)jQuery.access來(lái)遍歷和操作屬性。

根據(jù)value值來(lái)判斷是返回一個(gè)函數(shù)數(shù)組，還是返回一個(gè)函數(shù)傳入jQuery.access。

主要用到j(luò)Query.css和jQuery.style兩個(gè)方法。

?

getStyles

function getStyles( elem ) {return window.getComputedStyle( elem, null ); }

這是一個(gè)獲取實(shí)際css style的方法。

可是……getComputedStyle是啥東西……

getComputedStyle是一個(gè)可以獲取當(dāng)前元素所有最終使用的CSS屬性值。返回的是一個(gè)CSS樣式聲明對(duì)象([object CSSStyleDeclaration])，只讀。

語(yǔ)法：

var styles = window.getComputedStyle("元素", "偽類");

如果沒(méi)有偽類，則傳null。

實(shí)際上就是獲取最終瀏覽器繪制時(shí)的css值，因?yàn)閟tyle不會(huì)返回所有css值，只會(huì)返回設(shè)置的css值，所以需要用該方法來(lái)獲得所有css值。

限于篇幅本文就不詳細(xì)解釋了，有興趣的朋友請(qǐng)參見(jiàn)：獲取元素CSS值之getComputedStyle方法熟悉

?

jQuery.style

jQuery.style = function( elem, name, value, extra ) {// 不處理text和comment節(jié)點(diǎn)if ( !elem || elem.nodeType === 3 || elem.nodeType === 8 || !elem.style ) {return;}var ret, type, hooks,//修正css屬性名origName = jQuery.camelCase( name ),style = elem.style;//jQuery.cssProps是css緩存，如果有則取出值，否則通過(guò)vendorPropName函數(shù)來(lái)得到實(shí)際的css名字name = jQuery.cssProps[ origName ] || ( jQuery.cssProps[ origName ] = vendorPropName( style, origName ) );// 獲取必要的鉤子hooks = jQuery.cssHooks[ name ] || jQuery.cssHooks[ origName ];// 如果value已定義if ( value !== undefined ) {type = typeof value;// 如果value是+=或則-=一個(gè)數(shù)，則轉(zhuǎn)成對(duì)應(yīng)的數(shù)字if ( type === "string" && (ret = rrelNum.exec( value )) ) {value = ( ret[1] + 1 ) * ret[2] + parseFloat( jQuery.css( elem, name ) );// 將其類型改成numbertype = "number";}// 確保NaN和null不被設(shè)置if ( value == null || type === "number" && isNaN( value ) ) {return;}// 如果value是數(shù)字則加上pxif ( type === "number" && !jQuery.cssNumber[ origName ] ) {value += "px";}// 修復(fù)#8908，IE9的問(wèn)題，對(duì)于克隆的元素清除掉其background時(shí)，其原型的background也會(huì)被清除if ( !jQuery.support.clearCloneStyle && value === "" && name.indexOf("background") === 0 ) {style[ name ] = "inherit";}// 如果鉤子存在，則使用鉤子設(shè)置值，否則用style[ name ]來(lái)設(shè)置值if ( !hooks || !("set" in hooks) || (value = hooks.set( elem, value, extra )) !== undefined ) {style[ name ] = value;}} else {// 如果鉤子存在，則使用鉤子返回值if ( hooks && "get" in hooks && (ret = hooks.get( elem, false, extra )) !== undefined ) {return ret;}// 否則用style[ name ]來(lái)返回值return style[ name ];} };

這里面有一個(gè)挺有趣的問(wèn)題。下面兩個(gè)代碼最后結(jié)果是多少呢？

alert(("-" + 5) + 6); alert(("-" + 5) * 6);

?

jQuery.css

jQuery.css = function( elem, name, extra, styles ) {var val, num, hooks,origName = jQuery.camelCase( name );// 修正名字namename = jQuery.cssProps[ origName ] || ( jQuery.cssProps[ origName ] = vendorPropName( elem.style, origName ) );// 得到必要的鉤子hooks = jQuery.cssHooks[ name ] || jQuery.cssHooks[ origName ];// 如果有鉤子則使用get來(lái)獲取值if ( hooks && "get" in hooks ) {val = hooks.get( elem, true, extra );}// 沒(méi)有鉤子則用curCSS函數(shù)獲取if ( val === undefined ) {val = curCSS( elem, name, styles );}// 將"normal"轉(zhuǎn)成特定的值if ( val === "normal" && name in cssNormalTransform ) {val = cssNormalTransform[ name ];}// 是否需要強(qiáng)行轉(zhuǎn)成數(shù)字或者trueif ( extra === "" || extra ) {num = parseFloat( val );return extra === true || jQuery.isNumeric( num ) ? num || 0 : val;}return val; };

?

curCSS函數(shù)

var curCSS = function( elem, name, _computed ) {var width, minWidth, maxWidth,computed = _computed || getStyles( elem ),// 解決IE9的問(wèn)題，getPropertyValue用IE9中用.css('filter')ret = computed ? computed.getPropertyValue( name ) || computed[ name ] : undefined,style = elem.style;// 如果實(shí)際styles數(shù)組存在if ( computed ) {//如果ret為""，且elem不是子文檔（沒(méi)有style）if ( ret === "" && !jQuery.contains( elem.ownerDocument, elem ) ) {ret = jQuery.style( elem, name );}// 支持：Chrome < 17，Safari 5.1// 來(lái)自Dean Edwards帥呆的hack// 將百分比轉(zhuǎn)成更加有用的pxif ( rnumnonpx.test( ret ) && rmargin.test( name ) ) {// 記住原始值width = style.width;minWidth = style.minWidth;maxWidth = style.maxWidth;// 通過(guò)改變minWidth、maxWidth、width得到相應(yīng)的px值style.minWidth = style.maxWidth = style.width = ret;ret = computed.width;// 再將原來(lái)的值賦回去style.width = width;style.minWidth = minWidth;style.maxWidth = maxWidth;}}return ret; };

?Dean Edwards的hack主要利用的是部分瀏覽器會(huì)使用計(jì)算值來(lái)表示元素寬度，而非使用值。

?

show & hide

jQuery.fn.show = function() {return showHide( this, true ); };

jQuery.fn.show直接引用showHide函數(shù)，jQuery.fn.hide也是一樣：

jQuery.fn.hide = function() {return showHide( this ); };

而jQuery.fn.toggle則可接受state或者通過(guò)判斷當(dāng)前元素是否hidden，再調(diào)用jQuery.fn.show或者jQuery.fn.hide。

jQuery.fn.toggle = function( state ) {var bool = typeof state === "boolean";return this.each(function() {if ( bool ? state : isHidden( this ) ) {jQuery( this ).show();} else {jQuery( this ).hide();}}); };

?

showHide函數(shù)

function showHide( elements, show ) {var elem,values = [],index = 0,length = elements.length;// 遍歷所有元素for ( ; index < length; index++ ) {elem = elements[ index ];//如果元素沒(méi)有style屬性，則跳過(guò)if ( !elem.style ) {continue;}//取出保存在緩存的olddisplay值values[ index ] = jQuery._data( elem, "olddisplay" );//如果要顯示if ( show ) {// 通過(guò)將display設(shè)置成""，來(lái)判斷""元素是否會(huì)顯示if ( !values[ index ] && elem.style.display === "none" ) {elem.style.display = "";}// 如果display被設(shè)成了""，并且元素隱藏了，則通過(guò)css_defaultDisplay設(shè)置默認(rèn)顯示方法if ( elem.style.display === "" && isHidden( elem ) ) {values[ index ] = jQuery._data( elem, "olddisplay", css_defaultDisplay(elem.nodeName) );}//如果緩存沒(méi)有值，且元素沒(méi)有隱藏} else if ( !values[ index ] && !isHidden( elem ) ) {//將目前的display值保存入緩存jQuery._data( elem, "olddisplay", jQuery.css( elem, "display" ) );}}// 在第二次循環(huán)設(shè)置display屬性，避免不斷回流for ( index = 0; index < length; index++ ) {elem = elements[ index ];if ( !elem.style ) {continue;}if ( !show || elem.style.display === "none" || elem.style.display === "" ) {// 是否要西那是，要顯示則設(shè)置成緩存值或者""，否則設(shè)置為"none"elem.style.display = show ? values[ index ] || "" : "none";}}return elements; }

總結(jié)

以上是生活随笔為你收集整理的jQuery css的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。