当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JavaScript中的各种宽高总结

JavaScript中的各种宽高总结

2018年12月06日  | 移动技术网IT编程  | 我要评论

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动态定位的最内层包容元素

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网