outerWidth()和width()的區(qū)別
outerWidth(includeMargin) : 獲取元素集合中第一個(gè)元素的當(dāng)前計(jì)算寬度值。包括這個(gè)元素的 padding,border,如果 includeMargin 的值被設(shè)置為 true,那么 margin 的值也將被計(jì)算在寬度之內(nèi)。includeMargin 的值默認(rèn)為 false。該方法不適用于 window 和 document 對象。
width(value) : 為匹配的元素集合中獲取第一個(gè)元素的當(dāng)前計(jì)算寬度值。該方法適用于計(jì)算 window 和 document 對象的寬度。當(dāng)調(diào)用 .width(value)方法 的時(shí)候,這個(gè)“value”參數(shù)可以是一個(gè)字符串(數(shù)字加單位)或者是一個(gè)數(shù)字。如果這個(gè)“value”參數(shù)只提供一個(gè)數(shù)字,jQuery會 自動加上單位px。如果只提供一個(gè)字符串,任何有效的CSS尺寸都可以為寬度賦值(就像100px, 50%, 或者 auto)。
另外 JS 中還提供了 document.body.clientWidth 來獲取 body 的寬度,如果要使元素始終保持上下左右居中,而不隨著瀏覽器窗口變化而變化,就可以使用該方法來實(shí)現(xiàn)。
下面是一段使元素保持上下左右居中的代碼(注意居中的元素css需設(shè)置position)。
function center(node){
centerFun(node);
//瀏覽器窗口發(fā)生變化時(shí)仍然居中
$(window).resize(function(){
centerFun(node);
});
//滾動條滾動時(shí)仍然居中
$(window).scroll(function(){
centerFun(node);
});
}
function centerFun(node){
var windowWidth = $(window).width();
var windowHeight = $(window).height();
var scrollTop = $(document).scrollTop();
var nodeLeft = (windowWidth - node.width())/2;
var nodeHeight = (windowHeight - node.height())/2 + scrollTop;
node.css({left: nodeLeft + 'px',top: nodeHeight + 'px',display: 'block'});
}
center($("#box"));