outerWidth()和width()的区别
outerWidth(includeMargin) : 获取元素集合中第一个元素的当前计算宽度值。包括这个元素的 padding,border,如果 includeMargin 的值被设置为 true,那么 margin 的值也将被计算在宽度之内。includeMargin 的值默认为 false。该方法不适用于 window 和 document 对象。
width(value) : 为匹配的元素集合中获取第一个元素的当前计算宽度值。该方法适用于计算 window 和 document 对象的宽度。当调用 .width(value)方法 的时候,这个“value”参数可以是一个字符串(数字加单位)或者是一个数字。如果这个“value”参数只提供一个数字,jQuery会 自动加上单位px。如果只提供一个字符串,任何有效的CSS尺寸都可以为宽度赋值(就像100px, 50%, 或者 auto)。
另外 JS 中还提供了 document.body.clientWidth 来获取 body 的宽度,如果要使元素始终保持上下左右居中,而不随着浏览器窗口变化而变化,就可以使用该方法来实现。
下面是一段使元素保持上下左右居中的代码(注意居中的元素css需设置position)。
function center(node){
centerFun(node);
//浏览器窗口发生变化时仍然居中
$(window).resize(function(){
centerFun(node);
});
//滚动条滚动时仍然居中
$(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"));