jQueryソース読解:swap()
2291 ワード
swap()
CSS交換
アプリケーション:JS取得要素の幅:
注意:要素にdisplay:noneが設定されている場合、元のJS(offsetWidth)によって要素のサイズが取得され、値は0 である. jQueryが取得した要素の擬似配列.下付き文字を追加すると、対応するDOMオブジェクトを直接取得したり、get(index)でDOMオブジェクトを取得したりすることができます.getメソッドサポートパラメータは負数
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 );
}
},
注意: