jQueryソース読解:swap()

2291 ワード

swap()
CSS交換
// A method for quickly swapping in/out CSS properties to get correct calculations.
// Note: this method belongs to the css module but it's needed here for the support module.
// If support gets modularized, this method should be moved back to the css module.
	swap: function( elem, options, callback, args ) {
		var ret, name,
			old = {};

		// Remember the old values, and insert the new ones
		for ( name in options ) {
			old[ name ] = elem.style[ name ];
			elem.style[ name ] = options[ name ];
		}
      //     
		ret = callback.apply( elem, args || [] );

		// Revert the old values
		for ( name in options ) {
			elem.style[ name ] = old[ name ];
		}

		return ret;
	}

アプリケーション:JS取得要素の幅:$(".div1").get(0).offsetWidth jQuery取得要素の幅:$('.div1').width()要素がdisplay:noneに設定されている場合、JSは要素の幅を取得できません.jQueryのうちswapによって解決される.原理:要素を削除して保存するdisplay:noneスタイルa変数で、要素にdisplay:block; visibility:hidden; position:absoluteを設定します.このような効果はdisplay:noneの効果とほぼ同じであるが、要素の幅を取得し、幅を変数bに保存することができる.その後、変数aのスタイルを使用して要素の現在のスタイルを置き換えます.
cssShow = { position: "absolute", visibility: "hidden", display: "block" },

get: function( elem, computed, extra ) {
	if ( computed ) {

	// Certain elements can have dimension info if we invisibly show them
	// but it must have a current display style that would benefit
	return rdisplayswap.test( jQuery.css( elem, "display" ) ) &&

	// Support: Safari 8+
	// Table columns in Safari have non-zero offsetWidth & zero
	// getBoundingClientRect().width unless display is changed.
	// Support: IE <=11 only
	// Running getBoundingClientRect on a disconnected node
	// in IE throws an error.
	( !elem.getClientRects().length || !elem.getBoundingClientRect().width ) ?
		swap( elem, cssShow, function() {
		
		//       
			return getWidthOrHeight( elem, dimension, extra );
		} ) :
		getWidthOrHeight( elem, dimension, extra );
}
},

注意:
  • 要素にdisplay:noneが設定されている場合、元のJS(offsetWidth)によって要素のサイズが取得され、値は0
  • である.
  • jQueryが取得した要素の擬似配列.下付き文字を追加すると、対応するDOMオブジェクトを直接取得したり、get(index)でDOMオブジェクトを取得したりすることができます.getメソッドサポートパラメータは負数