當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

jQuery css

發布時間：2025/3/8 编程问答 31 豆豆

生活随笔收集整理的這篇文章主要介紹了 jQuery css 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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函數

?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();}}); };