js/jQuery中的宽和高

js/jQuery中的宽和高

window 与 document

window:窗口
Window对象表示浏览器中打开的窗口
Window对象可以省略

document:文档
Document对象是Window对象的一部分
浏览器的HTML文档称为Document对象

window.location === document.location

与window相关的宽高介绍

window.innerWidth 内部宽度 只包含内部显示区域
window.innerHeight 内部高度
window.outerWidth 外部宽度 还包括浏览器搜索栏等
window.outerHeight 外部高度

window.screen 用户屏幕信息
window.screen.height 屏幕高度(不变的)
window.screen.width 屏幕宽度(不变的)
window.screen.availHeight 屏幕可利用高度(不变的)
window.screen.availWidth 屏幕可利用宽度(不变的)
window.screenLeft 浏览器距离屏幕左侧距离(可变的)
window.screenTop 浏览器距离屏幕顶部距离(可变的)

与document相关的宽高介绍

client

document.body.clientWidth
document.body.clientHeight
document.body.clientLeft
document.body.clientTop

clientWidth 和 clientHeight

  • 该属性指的是元素的可视部分宽度和高度,即padding+content。
  • 如果没有滚动条,即为元素设定的高度和宽度。
  • 如果出现滚动条,滚动条会遮盖元素的宽高,那么该属性就是本来的宽高减去滚动条的宽高

小结

假如无padding无滚动
clientWidth = style.width

假如有padding无滚动
clientWidth = style.width + style.padding * 2

假如有padding有滚动,且滚动是显示的
clientWidth = style.width + style.padding * 2 - 滚动条宽度

clientLeft 和 clientTop

这两个返回的是元素周围边框的厚度,如果不指定一个边框或者不定位该元素,它的值就是0。

小结

这一对属性是用来读取元素的border的宽度和高度的

clientTop = border-top的border-width
clientLeft = border-left的border-width

offset

document.body.offsetWidth
document.body.offsetHeight
document.body.offsetLeft
document.body.offsetTop

offsetWidth 和 offsetHeight

这一对属性指的是元素的border+padding+content的宽度和高度
该属性和其内部的内容是否超出元素大小无关,只和本来设定的border以及width和height有关。

小结

假如无padding无滚动无border
offsetWidth = clientWidth = style.width

假如有padding无滚动有border
offsetWidth = style.width + style.padding2 + border宽度2
offsetWidth = clientWidth + border宽度*2

假如有padding有滚动,且滚动是显示的,有border
offsetWidth = style.width + style.padding2 + border宽度2
offsetWidth = clientWidth + 滚动条宽度 + border宽度*2

offsetLeft 和 offsetTop

offsetParent

  • 如果当前元素的父级元素没有进行CSS定位(position为absolute或relative),offsetParent为body
  • 如果当前元素的父级元素中有CSS定位(position为absolute或relative),offsetParent为最近有定位的父级元素

在IE6/7
offsetLeft = (offsetParent的padding-left) + (当前元素的margin-left)

在IE8/9/10及chrome中
offsetLeft = (offsetParent的margin-left) + (offsetParent的border宽度) + (offsetParent的padding-left) + (当前元素的margin-left)

在FireFox中
offsetLeft = (offsetParent的margin-left) + (当前元素的margin-left) + (offsetParent的padding-left)

scroll

document.body.scrollWidth
document.body.scrollHeight
document.body.scrollLeft
document.body.scrollTop

scrollWidth 和 scrollHeight

document.body的scrollWidth 和 scrollHeight与div的scrollWidth和scrollHeight是有点区别的。

document.body的scrollWidth和scrollHeight

一:给定宽高小于浏览器窗口
scrollWidth通常是浏览器窗口的宽度
scrollHeight通常是浏览器窗口的高度

二:给定宽高大于浏览器窗口,且内容小于给定宽高
scrollWidth给定的宽度+其所有的padding、margin和border
scrollHeight给定的高度+其所有的padding、margin和border

三:给定宽高大于浏览器窗口,且内容大于给定宽高
scrollWidth内部宽度+其所有的padding、margin和border
scrollHegiht内部高度+其所有的padding、margin和border

div的scrollWidth和scrollHeight

无滚动轴时:
scrollWidth == clientWidth = style.width + style.padding

有滚动轴时:
scrollWidth == 是实际内容的宽度 + padding 2
scrollHeight == 是实际内容的高度 + padding
2

scrollLeft 和 scrollTop

这些属性是可读写的,指的是当元素其中的内容超出其宽高的时候,元素被卷起的高度和宽度。

documentElement 和 body

document.documentElement html
document.body body
docuemnt.documentElement.clientHeight == document.body.clientHeight

兼容性

client相关宽高,各个浏览器解析都一样
当我们要获取可视区域的宽高时
document.documentElement.clientWidth || document.bodiy.clientWidth

offset相关宽高
offsetTop和offsetLeft兼容问题前面有解决方案
offsetWidth和offsetHeight各个浏览器解析基本一致

scroll相关宽高
前面有解决方案

Event中的5种坐标

clientX 和 clientY

相对于浏览器可视区域(0,0)的坐标

screenX 和 screenY

相对于设备屏幕左上角(0,0)的坐标

offsetX 和 offsetY

相对于事件源左上角(0,0)的坐标

pageX 和 pageY

相对于整个网页左上角(0,0)的坐标

X 和 Y

本来是IE属性,相对于用css动态定位的最内层包容元素

js实际宽高运用

可视区域加载

element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。
element.getClientRects()方法返回一个指向客户端中每一个盒子的边界矩形的矩形集合。

1
2
3
4
5
6
7
8
9
10
11
12
13
function showDiv(showDiv){
var showId = showDiv; 要显示的元素
var clients = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; // 浏览器可视区域高度
var divTop = showId.getBoundingClientRect().top; // 距离浏览器顶部的高度
if(divTop <= clients){
showId.style.display = 'block';
}
}
window.scroll = function(){ // 网页滚动时
var showDiv = document.getElementById('showId');
showDiv(showDiv);
}

网页滚动到底部加载

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function scrollBottomOrTop(){
var clients = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; // 浏览器可视区域高度
var scrollTop = document.body.scrollTop; // 滚动条运动高度
var wholeHeight = document.body.scrollHeight; // 整个网页高度
if(clients + scrollTop >= wholeHeight){
console.log('已经滚动到底部');
}
if(scrollTop == 0){
console.log('已经滚动到顶部');
}
}
window.onscroll = function(){
scrollBottomOrTop();
}

DIV滚动到底部加载

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function divScroll(){
var wholeHeight = divId.scrollHeight; // div整个内容的高度
var scrollTop = divId.scrollTop; // div滚动高度
var divHeight = divId.clientHeight; // div实际高度
if(scrollTop + divHeight >= wholeHeight){
console.log('div到底部了');
}
if(scrollTop == 0){
console.log('div到顶了');
}
}
div.onscroll = function(){
var divId = document.getElementById('div1');
divScroll(divId);
}

获取滚动轴的宽度

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function getScrollBarWidth(){
var el = document.createElement('p'),
styles = {
width: '100px',
height: '100px',
overflowY: 'scroll'
},
i,
scrollBarWidth;
for(i in styles){
el.style[i] = styles[i];
}
document.body.appendChild(el);
scrollBarWidth = el.offsetWidth - el.clientWidth;
el.remove();
return scrollBarWidth;
}
getScrollBarWidth();

jQuery中的宽和高

el.width()
el.height()
元素的content区域

el.innerWidth()
el.innerHeight()
元素的content + padding

el.outerWidth()
el.outerHeight()
el.outerWidth() 元素的content + padding + border
el.outerWidth(true) 元素的content + padding + border + margin

el.scrollLeft() 相对于水平滚动条左边的距离
el.scrollTop() 相对于垂直滚动条上边的距离

el.offset() 相对于document的当前坐标值(相对于body左上角的left,top的值)

el.position() 相对于offsetParent的当前坐标值(相对于offsetParent左上角的left,top的值)