盒子
盒子
文章目录󰁋
  1. 第一部分 JavaScript中的宽高属性
    1. 一、与window相关的宽高属性
      1. 1.1 window.location和document.location
      2. 1.2 window.screen
    2. 二、与document相关的宽高属性
      1. 2.1与client相关的宽高
      2. 2.2 与offset相关的宽高
      3. 2.3与scroll相关的宽高 (实际项目中用的最多)
      4. 2.4 documentElement和body的关系
    3. 三、Event对象的5种坐标
    4. 四、 js各种宽高的应用
    5. 五、js中的宽高属性总结
  2. 第二部分 jQuery中的宽高属性
    1. 一、jquery相关宽高介绍
    2. 二、jquery相关宽高举例
    3. 三、jquery各种宽高应用

JavaScript及jQuery中的各种宽高属性图解

原文链接 http://blog.poetries.top/2016/12/13/js-props
声明:本文根据慕课网学习视频整理

强烈建议打开控制台自己动手练习一遍,这样印象才会深刻

第一部分 JavaScript中的宽高属性


一、与window相关的宽高属性


1.1 window.location和document.location


  • window对象的location属性引用的是location对象,表示该窗口中当前显示文档的URL
  • document的对象的location属性也是引用location对象
  • 所以 window.location === document.location //true

    1.2 window.screen


  • window.screen包含有关用户屏幕的信息。它包括:
    • window.screen.width
    • window.screen.height
    • window.screen.availHeight
    • window.screen.availWidth
    • window.screenTop
    • window.screenLeft

window.screen

1.3 与window相关的宽高

  • window.innerWidth 内部的宽度
  • window.innerHeight 内部的高度
  • window.outWidth 外部的宽度
  • window.outHeight 外部的高度

与window相关的宽高

二、与document相关的宽高属性


2.1与client相关的宽高


  • document.body.clientWidth 元素宽度(可视内容区+内边距)
  • document.body.clientHeight元素高度(可视内容区+内边距)

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

example1:

1
2
3
4
5
6
7
8
9
10
11
body{ 
border: 20px solid #000;
margin: 10px;
padding: 40px;
background: #eee;
height: 350px;
width: 500px;
overflow: scroll;
}
console.log(document.body.clientWidth); // 350+padding(80) = 430
console.log(document.body.clientHeight); // 500 + padding(80) = 580

example2: 在div中添加文字, 指导出现滚动条

1
2
3
4
5
6
7
8
9
10
11
12
#exp2 {
width:200px;
height:200px;
background:red;
border:1px solid #000;
overflow:auto;
}

var test = document.getElementById("exp2");

console,log(test.clientHeight); // 200
console.log(test.clientWidth); //

window7下test.clientWidth

  • 小结clientWidth和clientHeight

    • padding无滚动 : clientWidth = 盒子的width
    • padding无滚动 : clientWidth = 盒子的width + 盒子的padding * 2
    • padding有滚动 : clientWidth = 盒子和width + 盒子的padding * 2- 滚动轴宽度
  • document.body.clientLeft
  • document.body.clientTop

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

例:

1
2
3
4
5
6
7
8
9
10
11
body{ 
border: 20px solid #000;
margin: 10px;
padding: 40px;
background: #eee;
height: 350px;
width: 500px;
overflow: scroll;
}
console.log(document.body.clientLeft); // 20
console.log(document.body.clientTop); // 20

小结clientLeft和clientTop

  • 这一对属性是用来读取元素的border的宽度和高度的
    • clientTop = border-top
    • clientLeft = border-left

2.2 与offset相关的宽高


  • document.body.offsetWidth(元素的border+padding+content的宽度)
  • document.body.offsetHeight(元素的border+padding+content的高度)

该属性和其内部的内容是否超出元素大小无关,只和本来设定的border以及width和height有关

例:

1
2
3
4
5
6
7
8
9
10
11
body{ 
border: 20px solid #000;
margin: 10px;
padding: 40px;
background: #eee;
height: 350px;
width: 500px;
overflow: scroll;
}
console.log(document.body.offsetWidth); // 470 = padding*2 + 350 + border*2
console.log(document.body.offsetHeight); // 620 = padding*2 + 500 + border*2

小结offsetWidth和offsetHeight

  • padding无滚动无border
    • offsetWidth = clientWidth = 盒子的宽度
  • padding无滚动有border
    • offsetWidth = 盒子的宽度 + 盒子padding2 + 盒子边框2 = clientWidth + 边框宽度*2
  • padding有滚动,且滚动是显示的,有border
    • offsetWidth = 盒子宽度 + 盒子padding2 + 盒子边框2 = clientWidth + 滚动轴宽度 + 边框宽度*2

  • document.offsetLeft
  • document.offsetTop

了解这两个属性我们必须先了解它,什么是offsetParent

  • 如果当前元素的父级元素没有进行CSS定位(positionabsoluterelative),offsetParentbody.
  • 假如当前元素的父级元素中有CSS定位,offsetParent取最近的那个父级元素

offsetLeft的兼容性问题:

  • 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

例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
body{ 
border: 20px solid #000;
margin: 10px;
padding: 40px;
background: #eee;
height: 350px;
width: 500px;
overflow: scroll;
}

#exp {
width:400px;
height:200px;
padding:20px;
margin:10px;
background:red;
border:20px solid #000;
overflow:auto;
}
var div = document.getElementById("exp");
  • 在IE8/9/10以及chrome中:

    • div.offsetLeft = 本身的margin10 + 父级元素的padding40 + margin10 + border20 = 80
    • div.offsetTop = 本身的margin10 + 父级元素的padding40 + margin10 + border20 = 80
  • 在FireFox:(相比chrome中少了border)

    • div.offsetLeft = 本身的margin10 + 父级元素的padding40 + margin10 = 60
    • div.offsetTop = 本身的margin10 + 父级元素的padding40 + margin10 = 60
  • 在IE6/7中:(相比在FireFox,不但少了border还少了父级元素的margin)

    • div.offsetLeft = 本身的margin10 + 父级元素的padding40 = 50
    • div.offsetTop = 本身的margin10 + 父级元素的padding40 = 50

2.3与scroll相关的宽高 (实际项目中用的最多)


  • document.body.scrollWidth
  • document.body.scrollHeight

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

例:

1
2
3
4
5
6
7
8
9
10
11
12
body{ 
border: 20px solid #000;
margin: 10px;
padding: 40px;
background: #eee;
height: 350px;
width: 500px;
overflow: scroll;
}

document.body.scrollHeight; //
document.body.scrollWidth; //
  • 当给定宽高小于浏览器窗口的宽高

    • scrollWidth = 通常是浏览器窗口的宽度
    • scrollHeight = 通常是浏览器窗口的高度
  • 当给定宽高大于浏览器窗口的宽高,且内容小于给定宽高的时候

    • scrollWidth = 给定宽度 + 其所有的padding + margin + border
    • scrollHeight = 给定高度 + 其所有的padding + margin + border
  • 当给定宽高大于浏览器窗口宽高,且内容大于给定宽高

    • scrollWidth = 内容宽度 + 其所有的padding + margin + border
    • scrollHeight = 内容高度 + 其所有的padding + margin + border

在某div中的scrollWidth和scrollHeight

  • 无滚动轴时:
    • scrollWidth = clientWidth = 盒子宽度 + 盒子padding*2

无滚动轴时

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

有滚动轴时

  • document.body.scrollLeft
  • document.body.scrollTop

与前面不同的是,这对属性是可读写的,指的是当元素其中的超出其宽高的时候,元素被卷起来的高度和宽度

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#exp {
width:400px;
height:200px;
padding:20px;
margin:10px;
background:red;
border:20px solid #000;
overflow-y:scroll;
}

var mydiv = document.getElementById("exp");

mydiv.scrollTop ; //默认情况下是0
mydiv.scrollLeft ; //默认情况下是0

//可以改写它

mydiv.scrollTop = 20;
console.log(mydiv.scrollTop)

scrollTop和scrollLeft

obj.style.width和obj.style.height

对于一个DOM元素,它的style属性返回的是一个对象,这个对象的任意一个属性是可读写的,style.width等于css属性中的宽度。style.height等于css属性中的高度

2.4 documentElement和body的关系


是父子级的关系

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
body{ 
border: 20px solid #000;
margin: 10px;
padding: 40px;
background: #eee;
height: 350px;
width: 500px;
overflow: scroll;
}

#exp {
width:400px;
height:200px;
padding:20px;
margin:10px;
background:red;
border:20px solid #000;
overflow-y:scroll;
}

console.log(document); //document
console.log(document.documentElement); //html
console.log(document.body); //body

Paste_Image.png

  • 兼容问题推荐使用 获取浏览器窗口可视区域大小
1
2
document.body.clientWidth || document.documentElement.clientWidth;
document.body.clientHeight || document.documentElement.clientHeight;

三、Event对象的5种坐标


Event对象的5种坐标

例:

1
2
<div id="example" 
style="width: 200px;height: 200px;background: red;margin: 100px auto;"></div>
1
2
3
4
5
6
7
8
var example = document.getElementById("example");
example.onclick = function(e){
console.log("clientX "+e.clientX + " : " + " clientY "+e.clientY);
console.log("screenX "+e.screenX + " : " + " screenY "+e.screenY);
console.log("offsetX "+e.offsetX + " : " + " offsetY "+e.offsetY);
console.log("pageX "+e.pageX + " : " + " pageY "+e.pageY);
console.log("x "+e.x + " : " + " y "+e.y);
}

Event对象的5种坐标

四、 js各种宽高的应用


  • example1:可视区域加载

用来解决offset的兼容性难问题

1
<div id="example1" ></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
#example1 {
width: 500px;
height: 350px;
background: red;
margin: 1000px auto 0 auto;
}
@-webkit-keyframes fadeInLeft{
0%{
opacity: 0;
transform: translate3d(-100%,0,0);
}
100%{
opacity: 1;
transform: none;

}
}
.fadeInLeft {
animation-name: fadeInLeft;
animation-duration: 2s;
}
1
2
3
4
5
6
7
8
9
10
11
12
function showDiv(){
var example = document.getElementById("example");
var clients = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;//可视区域的高度
var divTop = example.getBoundingClientRect().top;
if(divTop <= clients){
example.classList.add("fadeInLeft");
// 这里可以通过setAttribute设置图片的src按需加载
}
document.title = clients+"---"+divTop;
}

window.onscroll = showDiv;

在线演示

  • example2:网页滚动到顶部或者底部
1
<div id="example2" ></div>
1
2
3
4
5
6
#example2 {
width: 500px;
height: 350px;
background: red;
margin: 1000px auto 0 auto;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function scrollTopOrBottom(){
var example2 = document.getElementById("example");
var clients = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;//可视区域的高度,兼容性写法
var scrollTop = document.body.scrollTop;
var wholeHeight = document.body.scrollHeight;
if(clients + scrollTop >= wholeHeight){
alert("我已经到了底部!");
// 这里可以调用Ajax分页加载到页面中,实现多页加载功能
}else if(scrollTop == 0){
alert("我已经到了顶部了!");

}
document.title = (clients + scrollTop)+"---"+wholeHeight+"--"+scrollTop;
}

window.onscroll = scrollTopOrBottom;

在线演示

  • example3:DIV滚动到底部加载
1
2
3
4
5
6
7
8
<div id="example3" >
DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载
DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载
DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载
DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载
DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载
DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载DIV滚动到底部加载
</div>
1
2
3
4
5
6
7
8
#example3 {
width: 500px;
height: 400px;
background: red;
margin: 10px auto;
padding: 10px;
overflow-y: scroll;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var div = document.getElementById("example3");
function divScroll(){

var wholeHeight = div.scrollHeight;//滚动区域高度
var divScrollTop = div.scrollTop;//卷上去的那部分高度
var divHeight = div.clientHeight; //div的可视区域的高度


if(divScrollTop + divHeight >= wholeHeight){
alert("我已经到了底部!");
// 这里可以在div中通过滚动加载分页按需显示
}else if(divScrollTop == 0){
alert("我已经到了顶部了!");
}
document.title = (divScrollTop + divHeight)+"---"+wholeHeight+"--"+divScrollTop;
}

div.onscroll = divScroll;

在线演示

  • example4:计算滚动轴的宽度
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//获取滚动轴的宽度
function getScrollBar(){
var el = document.createElement("p");
var styles = {
width:"100px",
height:"100px",
overflowY:"scroll"
};
for (var prop in styles){
el.style[prop] = styles[prop];//把 styles上的属性全部遍历拷贝到el.style上

}
document.body.appendChild(el);
var scrollBarWidth = el.offsetWidth - el.clientWidth;
el.remove();
return scrollBarWidth;
}
alert(getScrollBar());//17

在线演示

五、js中的宽高属性总结


Paste_Image.png

document相关的宽高

第二部分 jQuery中的宽高属性


一、jquery相关宽高介绍


  • 1.1 width()
    • 特殊元素window.document只可以读,普通元素可以读写,width()返回结果无单位,css("width")的结果有单位

width--height

width

  • 1.2 innerWidth()
    • 包含padding(不推荐window,document调用)
  • 1.3 innerHeight()

innerWidth--innerHeight

innerWidth

  • 1.4 outerWidth()
    • 包含padding和border,当传true时包含marging,不传时不包含marging(不推荐window,document调用)
  • 1.5 outerHeight()

outerWidth--outerHeight

outerWidth

  • 1.6 scrollLeft():
    • 相对于水平滚动条左边的距离,如果滚动条非常左、或者元素不能被滚动,这个值为0;
  • 1.7 scrollTop():

    • 相对于垂直滚动条上边的距离,如果滚动条非常上、或者元素不能被滚动,这个值为0;
  • 1.8 .offset():

    • 相对于document的当前坐标值(相对于body左上角的left,top的值);
  • 1.9 .position():
    • 相对于offset parent的当前坐标值(相对于offset parent元素的左上角的left、top的值)

offset和position区别

二、jquery相关宽高举例


2.1 exmaple1

example1

1
2
3
<div class="parentDiv">
<div class="childrenDiv"></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
html,body {
margin:10px;
border:5px solid red;
padding:20px;
}
.parentDiv {
width:800px;
height:500px;
margin:5px auto;
background:#FF6600;
border:5px dashed green;padding:30px;position:relative;

}
.childrenDiv {
width:300px;
height:500px;
margin:5px auto;
background:yellow;
border:5px solid black;
padding:5px;
box-sizing:border-box;/*包括padding和border的值*/
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
//特殊元素的高度
//window document
console.log("$(window).height()"+$(window).height());
console.log("$(document).height()"+$(document).height());

//innerHeight
console.log("$(window).innerHeight()"+$(window).innerHeight());
console.log("$(document).innerHeight()"+$(document).innerHeight());

//普通child元素的高度

//480 = 500 - border*2 - padding*2 (因为设置了box-sizing,box-sizing把border和padding的值计算了进去)
console.log('$(".childrenDiv").height()'+ $(".childrenDiv").height());

//490 = 500 - border*2 - padding*2(innerHeight不包括padding)
console.log('$(".childrenDiv").innerHeight()'+ $(".childrenDiv").innerHeight());

//500 = 500 不包括margin
console.log('$(".childrenDiv").outerHeight()'+ $(".childrenDiv").outerHeight());

//510 = 500 + margin true包括margin
console.log('$(".childrenDiv").outerHeight()'+ $(".childrenDiv").outerHeight(true));

//scrollTop

$(window).scroll(function(){
document.title = "scrollTop "+$(this).scrollTop();
});

// jquery宽高演示之offset和position

console.log('$(".childrenDiv").offset().top '+$(".childrenDiv").offset().top);
console.log('$(".childrenDiv").offset().left '+$(".childrenDiv").offset().left);
console.log('$(".childrenDiv").position().top '+$(".childrenDiv").position().top);
console.log('$(".childrenDiv").position().top '+$(".childrenDiv").position().left);

Paste_Image.png

offset-position

在线演示

三、jquery各种宽高应用


3.1 jquery可视区域加载

1
<div id="example" ></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
#example {
width: 500px;
height: 350px;
background: red;
margin: 1000px auto 0 auto;
}
@-webkit-keyframes fadeInLeft{
0%{
opacity: 0;
transform: translate3d(-100%,0,0);
}
100%{
opacity: 1;
transform: none;

}
}
.fadeInLeft {
animation-name: fadeInLeft;
animation-duration: 2s;
}
1
2
3
4
5
6
7
8
9
10
$(window).scroll(function(){
var ks_area = $(window).height();//可视区域高度
var scrollHeight = $(window).scrollTop();//被卷上去的那部分
var divTop = $("#example").offset().top;//盒子距离浏览器顶部的距离

if(ks_area + scrollHeight >= divTop){
$("#example").addClass("fadeInLeft");
}
document.title = ks_area+'-'+scrollHeight+'-'+divTop;
});

在线演示

3.2 jquery滚动到底部和顶部加载

1
2
<div id="example" ></div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
1
2
3
4
5
6
#example {
width: 500px;
height: 350px;
background: red;
margin: 1000px auto 0 auto;
}
1
2
3
4
5
6
7
8
9
10
11
$(window).scroll(function(){
var ks_area = $(window).height();
var scrollTop = $(window).scrollTop();
var wholeHeight = $(document).height();

if(ks_area + scrollTop >=wholeHeight ){
alert("已经到底部了");
}else if(scrollTop == 0){
alert("已经到头部了");
}
})

在线演示

(完)

支持一下
扫一扫,支持poetries