jOuery 获取尺寸

用Jq获取各种尺寸

1. width() - 方法设置或返回元素的宽度（不包括内边距、边框或外边距）

2. height() - 方法设置或返回元素的高度（不包括内边距、边框或外边距）

     注意点：
    1.获取到的就是内容的宽高,不带px的number类型的值.
    2.获取不传参
    3.传参代表的是设置内容的宽高

1. innerWidth() - 方法返回元素的宽度（包括内边距）

2. innerHeight() - 方法返回元素的高度（包括内边距）

     注意点：
    1.获取到的就是内容+padding的宽高,不带px的number类型的值.
    2.获取不传参
    3.传参代表的是设置内容的宽高，但是注意这里不会改变border的大小

1. outerWidth() - 方法返回元素的宽度（包括内边距和边框）

2. outerHeight() - 方法返回元素的高度（包括内边距和边框）

     注意点：
    1.获取到的是内容+padding+border+margin 的宽高.
    2.不传参代表的是获取获取到的是内容+padding+border 的宽高.
    3.传的参数是true，获取到的是内容+padding+border+margin 的宽高.

1. offset()方法：获取到的是一个对象,里面有left值和top的值.

      注意点：
     1.offset()方法获取到的是一个对象,里面有left值和top的值.
     2.offset方法获取元素距离document的位置.
     3.不传参是获取，传参是设置

1. position方法：获取的是元素距离有定位的父元素(offsetParent)的位置

     注意点：
     1.获取到的也是一个对象,包含top和left值.
     2.不能进行设置

用JS获取各种尺寸

屏幕分辨率的高和宽

window.screen 对象包含有关用户屏幕的信息。
1. screen.height 返回屏幕分辨率的高
2. screen.width 返回屏幕分辨率的宽

屏幕可用高和宽度

1. screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如任务栏。

2. screen.availHeight 属性返回访问者屏幕的高度，以像素计，减去界面特性，比如任务栏。

浏览器窗口可视区域大小

获得浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）的方法:

一、对于IE9+、Chrome、Firefox、Opera 以及 Safari：

1. window.innerHeight - 浏览器窗口的内部高度
2. window.innerWidth - 浏览器窗口的内部宽度

二、对于 Internet Explorer 8、7、6、5：

1. document.documentElement.clientHeight表示HTML文档所在窗口的当前高度。
2.  document.documentElement.clientWidth表示HTML文档所在窗口的当前宽度。

或者

Document对象的body属性对应HTML文档的标签

1. document.body.clientHeight
2.  document.body.clientWidth

网页尺寸scrollHeight

scrollHeight和scrollWidth，获取网页内容高度和宽度。

获取元素内容的真实宽高，这里是内容，不包括内边距以及border

1、scrollHeight表示元素的总高度，包括由于溢出而无法展示在网页的不可见部分

2、scrollWidth表示元素的总宽度，包括由于溢出而无法展示在网页的不可见部分

3、scrollTop：onscroll事件发生时，元素向上卷曲出去的距离

4、scrollLeft：onscroll事件发生时，元素向左卷曲出去的距离
 

网页尺寸offsetHeight

offsetHeight和offsetWidth，获取网页内容高度和宽度(包括滚动条等边线，会随窗口的显示大小改变)。

 

offsetHeight = clientHeight + 滚动条 + 边框。

JS中的offset家族：

一、offsetEWidth与offsetHeight：

获取的是元素的实际宽高 = width + border + padding

注意点：
1.可以获取行内及内嵌的宽高
2.获取到的值是一个number类型，不带单位
3.获取的宽高包含border和padding
4.只能读取，不能设置

二：offsetLeft与offsetTop:

offsetLeft:获取自己左外边框与offsetParent的左内边框的距离

offsetTop:获取自己上外边框与offsetParent的上内边框的距离

三：offsetParent:获取最近的定位父元素 （自己定位参照的父元素）

注意点：
1.如果元素自身是固定定位（fixed），则定位父级是null
2.如果元素自身是非固定定位,并且所有的父元素都没有定位，那么他的定位父级是body
3.body的定位父级是null

 

总结：

相同点：
a、js中的scrollLeft与scrollTop与jQuery中的一样
b、js中的offsetLeft及offsetTop和jQuery中position方法一样
c、 $(window).width()
$(window).height()和原生中的clientHeight与clientWidth获取可视区的宽高一致

最后一点，一定要理解清楚：

可视区域就是：你可以看到的区域。

浏览器窗口显示网页的部分（即不包括地址栏、工具栏）就是可视区。。

你可以用鼠标来推动浏览器窗口来改变大小，此时可视区的大小也是跟着变的。