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

?

jQuery.fn.css

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

又是通過jQuery.access來遍歷和操作屬性。

根據value值來判斷是返回一個函數數組，還是返回一個函數傳入jQuery.access。

主要用到jQuery.css和jQuery.style兩個方法。

?

getStyles

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

這是一個獲取實際css style的方法。

可是……getComputedStyle是啥東西……

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

語法：

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

如果沒有偽類，則傳null。

實際上就是獲取最終瀏覽器繪制時的css值，因為style不會返回所有css值，只會返回設置的css值，所以需要用該方法來獲得所有css值。

限于篇幅本文就不詳細解釋了，有興趣的朋友請參見：獲取元素CSS值之getComputedStyle方法熟悉

?

jQuery.style

jQuery.style = function( elem, name, value, extra ) {// 不處理text和comment節點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緩存，如果有則取出值，否則通過vendorPropName函數來得到實際的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是+=或則-=一個數，則轉成對應的數字if ( type === "string" && (ret = rrelNum.exec( value )) ) {value = ( ret[1] + 1 ) * ret[2] + parseFloat( jQuery.css( elem, name ) );// 將其類型改成numbertype = "number";}// 確保NaN和null不被設置if ( value == null || type === "number" && isNaN( value ) ) {return;}// 如果value是數字則加上pxif ( type === "number" && !jQuery.cssNumber[ origName ] ) {value += "px";}// 修復#8908，IE9的問題，對于克隆的元素清除掉其background時，其原型的background也會被清除if ( !jQuery.support.clearCloneStyle && value === "" && name.indexOf("background") === 0 ) {style[ name ] = "inherit";}// 如果鉤子存在，則使用鉤子設置值，否則用style[ name ]來設置值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 ]來返回值return style[ name ];} };

這里面有一個挺有趣的問題。下面兩個代碼最后結果是多少呢？

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來獲取值if ( hooks && "get" in hooks ) {val = hooks.get( elem, true, extra );}// 沒有鉤子則用curCSS函數獲取if ( val === undefined ) {val = curCSS( elem, name, styles );}// 將"normal"轉成特定的值if ( val === "normal" && name in cssNormalTransform ) {val = cssNormalTransform[ name ];}// 是否需要強行轉成數字或者trueif ( extra === "" || extra ) {num = parseFloat( val );return extra === true || jQuery.isNumeric( num ) ? num || 0 : val;}return val; };

?

curCSS函數

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

?Dean Edwards的hack主要利用的是部分瀏覽器會使用計算值來表示元素寬度，而非使用值。

?

show & hide

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

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

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

而jQuery.fn.toggle則可接受state或者通過判斷當前元素是否hidden，再調用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函數

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

總結

以上是生活随笔為你收集整理的jQuery css的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。