JavaScript中的各种宽高总结
window和document
首先我们来高清两个概念:
window和document的区别是什么?
window.location和document.location是一样吗?
第一个问题:
window对象表示浏览器中打开的窗口;window对象可以省略。比如alert()、window.alert()。
document对象是window对象的一部分。那么document.body 我们可以写成window.document.body;浏览器的html文档成为document对象。
第二问题:
window对象的location属性引用的是location对象,表示该窗口中当前显示文档的url。
document的对象的location属性也是引用了location对象。
那意思是:
1 window.location === document.location; //true
在通常情况下一样,frame也是一样
与window相关的宽高介绍:
与window相关的宽高有一下几个:
window.innerwidth,通过字面意思我们知道这是一个内部的宽度
window.innerheight,内部的高度
window.outwidth,外部的宽度
window.outheight,外部的高度
window.innerheight和window.outheight
我发现在windows 10下chrome和360安全浏览器不一样、、、、(后面代码测试部分)
window.innerwidth和window.outwidth
挂靠在window下的宽高还有window.screen, window.screen包含有关用户屏幕的信息。它包括:
- window.screen.width
- window.screen.height
- window.screen.availheight
- window.screen.availwidth
- window.screentop
- window.screenleft
图解
window相关宽高代码演示
演示代码:
1 console.log("innerwidth=",innerwidth); 2 console.log("innerheight=",innerheight); 3 console.log("outerwidth=",outerwidth); 4 console.log("outerheight=",outerheight);
chrome浏览器下效果
代码:
1 console.info("screen.width=",screen.width); 2 console.info("screen.height=",screen.height); 3 console.info("screen.availwidth=",screen.availwidth); 4 console.info("screen.availheight=",screen.availheight);
在chrome浏览器下效果
window相关宽高浏览器兼容问题
innerheight和outerheight是不支持ie9以下版本的,而screen系列则不存在兼容问题。
document下面client相关宽高介绍
docment下有三类属性:
1.与client相关的宽高
2. 与offset相关的宽高
3.与scroll相关的宽高
与client相关的宽高
与client相关的宽高又有如下几个属性:
1.document.body.clientwidth
2.document.body.clientheight
3.document.body.clientleft
4.document.body.clienttop
clientwidth和clientheight
该属性指的是元素的可视部分宽度和高度,即padding+contenr。
如果没有滚动条,即为元素设定的高度和宽度。
如果出现滚动条,滚动条会遮盖元素的宽高,那么该属性就是其本来宽高减去滚动条的宽高。
我们来看如下代码:
1 body{ 2 border: 20px solid #000; 3 margin: 10px; 4 padding: 40px; 5 background: #eee; 6 height: 350px; 7 width: 500px; 8 overflow: scroll; 9 } 10 11 console.log(document.body.clientheight); //430(padding*2+height) 12 console.log(document.body.clientwidth); //580(padding*2+width)
我们再看下面的代码:
1 #mydiv{ 2 width: 200px; 3 height: 200px; 4 background: red; 5 border: 1px solid #000; 6 overflow: auto; 7 }
在div中添加文字知道出现滚动轴,这时候
1 var mydiv = document.getelementbyid("mydiv"); 2 console.log("mydiv.clientheight=",mydiv.clientheight); // 200 3 console.log("mydiv.clientwidth=",mydiv.clientwidth); // 183(减去了滚动条的宽度)
而在mac系统下,滚动条不占高度,这时候client的宽度还是200.
总结
- 假入无padding无滚动条,clientwidth=style.width
- 假如有padding无滚动轴,clientwidth=style.width+style.padding*2
- 假如有padding有滚动,且滚动是显示的,clientwidth=style.width+style.padding*2-滚动轴宽度
clientleft和clienttop
这两个返回的是元素周围边框的厚度,如果不指定一个边框或者不定位该元素,他的值就是0.
我们还是以body为例:
1 body{ 2 border: 20px solid #000; 3 margin: 10px; 4 padding: 40px; 5 background: #eee; 6 height: 350px; 7 width: 500px; 8 overflow: scroll; 9 } 10 11 console.log(document.body.clientleft); //20 12 console.log(document.body.clienttop); //20
这一对属性是用来读取元素的body的宽度和高度的
clienttop=border-top的border-width
clientleft=border-left的border-width
与offset相关宽高介绍
与offset相关的宽高又有如下几个属性:
- document.body.offsetwidth
- document.body.offsetheight
- document.offsetleft
- document.offsettop
offsetwidth与offsetheight
这一对属性指的是元素的border+padding+content的宽度和高度。
该属性和其内部的内容是否超出元素大小无关,只和本来设定的border以及width和height有关。
我们还是以body为例:
1 body{ 2 border: 20px solid #000; 3 margin: 10px; 4 padding: 40px; 5 background: #eee; 6 height: 350px; 7 width: 500px; 8 overflow: scroll; 9 } 10 11 console.log("offsetwidth=",document.body.offsetwidth); 12 //620(width+margin*2+padding*2+border*2) 13 console.log("offsetheight=",document.body.offsetheight); 14 //470(width+margin*2+padding*2+border*2)
总结
假如无padding无滚动条无border:
offsetwidth=clientwidth=style.width
假如有padding无滚动条有border:
offsetwidth=style.width+style.padding2+(border-width)2
offsetwidth=clientwidth+border宽度*2
假如有padding有滚动条,且滚动条是显示的,有border:
offsetwidth=style.width+style.padding2+(border-width)2
offsetwidth=clientwidth+滚动条宽度+border宽度*2
offsetleft和offsettop
这两个属性是基于offsetparent的,了解这两个属性我们必须先了解它,什么是offsetparent呢?
如果当前元素的父级元素没有进行css定位(position为absolute或relative),offsetparent为border.
假如当前元素的父级元素中有css定位,offsetparent取最近的那个父级元素。
在ie6/7中:
offsetleft=(offsetparent的padding-left)+(当前元素的margin-left)
在ie8/9/10及chrome中:
offsetleft=(offsetparent的margin-left)+(offsetparent的border宽度)+(offsetparentd的padding-left)+(当前元素的margin-left)
在firefox中:
offsetleft=(offsetparent的margin-left)+(当前元素的margin-left)+(offsetparent的padding-left)
css:
1 body{ 2 border: 20px solid #000; 3 margin: 10px; 4 padding: 40px; 5 background: #eee; 6 height: 350px; 7 width: 500px; 8 } 9 #mydiv{ 10 width: 400px; 11 height: 200px; 12 padding: 20px; 13 margin :10px; 14 background: #f60; 15 border: 20px solid #888; 16 }
在ie8/910及chrome中
mydiv.offsetleft = 80
mydiv.offsettop = 80
在火狐中
mydiv.offsetleft = 60
mydiv.offsettop = 60
在ie低版本ie6/7中是
mydiv.offsetleft = 50
mydiv.offsettop = 50
与scroll相关宽高介绍
与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
scrollheight内容高度+其所有的padding、margin和border
再来看看在某div中scrollwidth和scrollheight:
在无滚动轴的时候:
scrollwidth==clientwidth=style.width+style.padding*2
在有滚动轴的时候:
scrollwidth==实际内容的宽度+padding2
scrollheight==实际内容的高度+padding2
scrollleft和scrolltop
这对属性是可读写(可被重新赋值) 的,指的是当元素其中的内容超出其宽高的时候,元素被卷起来的高和宽度。
obj.style.width和obj.style.height
对于一个dom元素,它的style属性返回的是一个对象,这个对象中的任意一个属性是可读写的,style.width等于css属性中的宽度style.height等于css属性中的高度。
event对象的5种坐标
哪五种坐标?
clientx和clienty,相对于浏览器(可是区左上角0,0)的坐标
screenx和screeny,相对于设备屏幕左上角(0,0)的坐标
offsetx和offsety,相对于事件源左上角(0,0)的坐标
pagex和pagey,相对于整个网页左上角(0,0)的坐标
x和y,本来是ie属性,相对于用css动态定位的最内层包容元素