寫(xiě)在前面：

Window和document對(duì)象的區(qū)別

window對(duì)象表示瀏覽器中打開(kāi)的窗口

window對(duì)象是可以省略的? window.alert(1)

document對(duì)象是window對(duì)象的一部分, 可以寫(xiě)成window.document.body = document.body

瀏覽器的HTML文檔成為Document對(duì)象

window.location和document.location

window.location == document.location //true

在iframe中 也是全等的

一忘嫉、與window相關(guān)的高寬

window.innerWidth

window.innerHeight? 去掉console控制臺(tái)欄 不包括導(dǎo)航欄 菜單欄 地址欄(不包括資源管理器欄)

window.outerWidth

window.outerHeight? 包括導(dǎo)航欄 菜單欄 地址欄(不包括資源管理器欄)

window.screen 包含用戶(hù)屏幕的信息 (支持所有的瀏覽器 盡量screen是小寫(xiě))

window.screen.height? 整個(gè)屏幕的高

window.screen.width

window.screen.availHeight 去掉mac上無(wú)線網(wǎng)音量圖標(biāo)? 去掉windows下面資源管理器一塊

window.screen.availWidth

window.screenTop? 瀏覽器距離頂部的距離

window.screenLeft 瀏覽器距離最左側(cè)的距離

window相關(guān)的高寬兼容性表述

innerHeight IE9+

outerHeight IE9+

對(duì)于IE8,7,6,5? 代替innerHeight 和 innerWidth

varw =document.documentElement.clientWidth ||document.body.clientWidth;varh =document.documentElement.clientHeight ||document.body.clientHeight;

二奉呛、document相關(guān)的寬高

1桑驱、與client相關(guān)的寬高

document.body.clientWidth

1)元素可視部分的寬, 即padding+content, 如果沒(méi)有滾動(dòng)條,就是元素設(shè)定的寬高

2)如果有滾動(dòng)條,滾動(dòng)條覆蓋元素的寬高, 該屬性就是元素本來(lái)寬高減去滾動(dòng)條寬高

document.body.clientHeight

document.body.clientLeft

返回元素周?chē)吙虻暮穸萣order, 如果不指定一個(gè)邊框或者不定位該元素,其值就是0

clientTop = border-top的寬

clientLeft = border-left的寬

document.body.clientTop

2北启、與offset相關(guān)的寬高

document.body.offsetWidth

指的是元素的border+padding+content的寬度和高度

該屬性和其內(nèi)部的內(nèi)容是否超出元素的大小無(wú)關(guān), 只和本來(lái)設(shè)定的border以及width和height有關(guān)

假如沒(méi)有無(wú)padding無(wú)滾動(dòng)無(wú)border offsetWidth = clientWidth = style.width

假如有padding無(wú)滾動(dòng)有border offsetWidth=style.width+style.aadding2+(borderWidth)2

假如有padding有滾動(dòng) offsetWidth = style.width + style.padding2 + borderWidth2 或者

offsetWidth = clientWidth + 滾動(dòng)軸寬度 + border寬度*2

document.body.offsetHeight

document.body.offsetLeft

offsetParent 如果當(dāng)前元素的父級(jí)元素沒(méi)有進(jìn)行css定位(position為absolute或者relative), offsetParent為body

如果單錢(qián)元素的父級(jí)元素中有css定位(position為absolute或者relative),offsetParent取最近的父級(jí)元素

兼容性問(wèn)題

在IE6 7中 offsetLeft = offsetParent的padding-left+(當(dāng)前元素的margin-left)

在IE8/9/10 chrome中, offsetLeft=(offsetParent的margin-left)+(offsetParent的border寬度)+(offsetParent的padding-left寬度) + (當(dāng)前元素的margin-left)

在firefox中 offsetLeft=(offsetParent的margin-left)+(當(dāng)前元素的margin-left)+(offsetParent的padding-left寬度)

document.body.offsetTop

3、與scroll相關(guān)的寬高

document.body.scrollWidth document.body.scrollHeight? 針對(duì)body 的scrollWidth和scrollHeight

給定的寬高小于瀏覽器窗口的時(shí)候, scrollWidth和scrollHeight通常是瀏覽器窗口的寬高

給定的寬高大于瀏覽器窗口且內(nèi)容小于給定的寬高的時(shí)候, scrollWidth=給定的寬度+其所有的padding和magin以及border

給定的寬高大于瀏覽器窗口且內(nèi)容大于給定的寬高的時(shí)候, scrollWidth=內(nèi)容寬度+其所有的padding,margin,border

oDiv.scrollWidth oDiv.scrollHeight 針對(duì)某個(gè)div的情況

在無(wú)滾動(dòng)軸的情況下, scrollWidth= clientWidth = style.width + style.padding*2

有滾動(dòng)軸的情況下, scrollWidth = 實(shí)際內(nèi)容的寬度 + padding2, scrollHeight = 實(shí)際內(nèi)容的高度+padding2

document.body.scrollLeft document.body.scrollTop

該屬性是可讀寫(xiě)的, 值得是當(dāng)元素其中的內(nèi)容超出其寬高的時(shí)候, 元素被卷起的高度和寬度

document, documentElement, body

document.documentElement = html

document.documentElement.childeNodes[1] = body

document.body = body

document寬高兼容問(wèn)題

client 各個(gè)瀏覽器的解析都一樣

獲取可視區(qū)域的寬高的時(shí)候, document.documentElement.clientWidth || document.body.clientWidth

offset

offsetLeft offsetTop有兼容性問(wèn)題

offsetHeight offsetWidth 各個(gè)瀏覽器解析基本一致

scroll

在ff下 document.body.scrollHeight 將body當(dāng)做一個(gè)div來(lái)處理,這里會(huì)有點(diǎn)不同? 如果是在div下面是一樣的

三蝌麸、event對(duì)象中五種坐標(biāo)

1点寥、clientX和clientY

可視區(qū)域的, 相對(duì)于瀏覽器(可視區(qū)域左上角0,0)的坐標(biāo)

鼠標(biāo)相對(duì)于瀏覽器窗口可視區(qū)域的X，Y坐標(biāo)（窗口坐標(biāo)）来吩，可視區(qū)域不包括工具欄和滾動(dòng)條敢辩。IE事件和標(biāo)準(zhǔn)事件都定義了這2個(gè)屬性

2、screenX和screenY

鼠標(biāo)相對(duì)于設(shè)備屏幕左上角(0,0)的坐標(biāo)

3弟疆、offsetX和offsetY

鼠標(biāo)相對(duì)于事件源左上角(0,0)的坐標(biāo)

4戚长、pageX和pageY

鼠標(biāo)相對(duì)于整個(gè)網(wǎng)頁(yè)左上角(0,0)的坐標(biāo) (比如滾上去的區(qū)域也算在里面)

這2個(gè)屬性不是標(biāo)準(zhǔn)屬性，但得到了廣泛支持怠苔。IE事件中沒(méi)有這2個(gè)屬性同廉。

vardivscroll =document.getElementById('testDiv')functiondivScroll(){// 獲取div整個(gè)部分的高度varwholeHeight = divscroll.scrollHeight;// 獲取div卷起的高度varscrollTop = divscroll.scrollTop;//獲取div的高度? oDiv.style.height 獲取的是內(nèi)聯(lián)樣式的高度? 取不到padding//var divHeight = divscroll.clientHeight;vardivHeight = divscroll.offsetHeight;if(scrollTop + divHeight >= wholeHeight) {? ? ? ? ? ? ? ? ? ? alert("div滾動(dòng)到了底部")? ? ? ? ? ? ? ? }if(scrollTop ==0) {? ? ? ? ? ? ? ? ? ? alert("div滾動(dòng)到了頭部")? ? ? ? ? ? ? ? }? ? ? ? ? ? }? ? ? ? ? ? divscroll.onscroll =function(){? ? ? ? ? ? ? ? divScroll();? ? ? ? ? ? }

計(jì)算滾動(dòng)軸的寬度

mac 下 滾動(dòng)軸是不占用寬度的 會(huì)消失

但是windows系統(tǒng)下滾動(dòng)軸是占用一定寬度的\

offsetWidth是包含滾動(dòng)軸的 clientWidth如果文檔有滾動(dòng)軸是要減去滾動(dòng)軸的

scrollWidth = el.offsetWidth - el.clientWidth;

// 通過(guò)offsetWidth - clientWidth計(jì)算functiongetScrollBar(){varel =document.createElement("p");varstyles = {width:'100px',height:'100px',overflowY:'scroll'};vari, scrollBarWidthfor(iinstyles) {? ? el.style[i] = styles[i]? }document.body.appendChild(el);varscrollBarWidth = el.offsetWidth - el.clientWidth;? el.remove();returnscrollBarWidth;? }console.log(getScrollBar())

添加滾動(dòng)軸 clientWidth會(huì)變

functiongetScrollBar(){varel =document.createElement("p");varstyles = {width:'100px',height:'100px',? };vari, scrollBarWidthfor(iinstyles) {? ? el.style[i] = styles[i]? }document.body.appendChild(el);varclientWidth1 = el.clientWidth;// 沒(méi)有滾動(dòng)軸下的寬度el.style.overflowY ="scroll"varclientWidth2 = el.clientWidth;//添加了滾動(dòng)軸之后的寬度varscrollBarWidth = clientWidth1 - clientWidth2;? el.remove();returnscrollBarWidth;}console.log(getScrollBar())

jQuery寬高理解

.width()? .height()

不包括padding border margin

可讀寫(xiě)的 (對(duì)于document和window 只能讀不能寫(xiě))

對(duì)于普通元素是可以讀寫(xiě)的 width(value) width(function() {})

width([value])和css("width"[,value])的區(qū)別

width返回的結(jié)果是沒(méi)有單位的

css("width")返回的結(jié)果是有單位的

.innerWidth()? .innerHeight()

在element的基礎(chǔ)上包括了padding 但是不包括border margin

對(duì)于document和window是只讀的不寫(xiě)的

對(duì)于普通元素是可以讀寫(xiě)的 innerWidth(value) innerWidth(function() {})

.outerWidth()? .outerHeight()

outerHeight(true) 是包含border和margin的

outerHeight(false) 是只包含border不包含margin

對(duì)于window和document只讀不寫(xiě) 和width()是相等的 不推薦使用

對(duì)于普通元素是可以讀寫(xiě)的 outerWidth(value) outerWidth(function() {})

scrollLeft和scrollTop()

和js的是一樣的

scrollLeft(): 相對(duì)于水品滾動(dòng)條左邊的距離, 如果滾動(dòng)條非常左或者不能滾動(dòng), 那么scrollLeft為0? 即卷進(jìn)去的部分為0

scrollTop() 相對(duì)于縱向滾動(dòng)條上邊的距離, 如果滾動(dòng)條非常上, 或者元素不能滾動(dòng), 那么這個(gè)值為0, 即卷上去的部分為0

html,body{margin:10px;border:5pxsolid red;padding:20px;? ? }.parentDiv{width:800px;height:500px;margin:5pxauto;background:#FF6600;border:5pxdashed green;padding:30px;position: relative;? ? }.childrenDiv{width:300px;height:300px;margin:50pxauto;background: yellow;border:5pxsolid black;padding:5px;box-sizing: border-box;? ? }// window是可視區(qū)域的高度 隨著窗口變化而變化 document是文檔的高度是不變化的console.log($(window).height())console.log($(document).height())console.log($(window).innerHeight())console.log($(document).innerHeight())console.log($(window).outerHeight())console.log($(document).outerHeight())console.log("-----------------")// 普通元素的高度console.log($(".childrenDiv").height())//280 = 300 - border*2 - padding * 2console.log($(".childrenDiv").innerHeight())// 290 = 300 - padding * 2console.log($(".childrenDiv").outerHeight(true))// 300 包括padding+border 但是設(shè)置了屬性box-sizing:border-box;console.log($(".childrenDiv").outerHeight(true))// 400 = 300 + margin * 2 包括padding+border+margin// scrollTop? scrollLeft$(window).scroll(function(){console.log($(this).scrollTop())//輸出滾動(dòng)軸卷曲的高度})? ? $(".parentDiv").scroll(function(){console.log($(this).scrollTop())//輸出滾動(dòng)軸卷曲的高度})//offset position

offset() .position()

offset(): 相對(duì)于document的當(dāng)前坐標(biāo)值(相對(duì)于body左上角的left和top值)

position(): 相對(duì)于offsetParent()(最近的一個(gè)父級(jí)有position屬性)的一個(gè)偏移坐標(biāo)值

html,body{margin:10px;border:5pxsolid red;padding:20px;? ? }.parentDiv{width:800px;height:500px;margin:5pxauto;background:#FF6600;border:5pxdashed green;padding:30px;position: relative;? ? }.childrenDiv{width:300px;height:300px;margin:50pxauto;background: yellow;border:5pxsolid black;padding:5px;position: relative;left:10px;top:30px;? ? }//offset positionconsole.log($(".childrenDiv").offset().top)// 155console.log($(".childrenDiv").offset().left)// 582// position有兼容性問(wèn)題// 如果父元素沒(méi)有設(shè)置position? 距離瀏覽器頂端? 看margin的左上角console.log($(".childrenDiv").position().top)// 30 + 30console.log($(".childrenDiv").position().left)// 30 + 10

jQuery寬高理解應(yīng)用

可視區(qū)域的加載

#showDiv{width:500px;height:350px;background: dodgerblue;margin:1000pxauto0;? }? ? @-webkit-keyframesfadeInLeft {? ? 0% {opacity:0;-webkit-transform:translate3d(-100%, 0, 0);transform:translate3d(-100%, 0, 0);? ? }? ? 100% {opacity:1;-webkit-transform: none;transform: none;? ? }? }? ? @keyframesfadeInLeft {from{opacity:0;-webkit-transform:translate3d(-100%, 0, 0);transform:translate3d(-100%, 0, 0);? ? }to{opacity:1;-webkit-transform: none;transform: none;? ? }? }.fadeInLeft{animation: fadeInLeft2sease;-webkit-animation: fadeInLeft2sease;? }$(window).scroll(function(){// 獲取可視區(qū)域varks_area = $(window).height();//卷起的高度varscrollHeight = $(window).scrollTop();//div距離頂部的距離vardivtop = $("#showDiv").offset().top;console.log(ks_area)console.log(scrollHeight)console.log(divtop)if(ks_area + scrollHeight >= divtop) {? ? ? $("#showDiv").addClass("fadeInLeft");? ? }? });

滾動(dòng)到底部加載 頂部

// 可視區(qū)域的高度varks_area = $(window).height();// 整個(gè)文檔的高度varwholeHeight = $(document).height();? ? $(window).scroll(function(){// 卷起的高度varscrollTop = $(window).scrollTop();if(scrollTop ==0) {? ? ? ? ? alert("滾動(dòng)到了頂部")? ? ? }if(scrollTop + ks_area >= wholeHeight) {? ? ? ? ? alert("滾動(dòng)到了底部")? ? ? }? ? })

作者：FConfidence

鏈接：http://www.reibang.com/p/e874ae203a60

來(lái)源：簡(jiǎn)書(shū)

簡(jiǎn)書(shū)著作權(quán)歸作者所有，任何形式的轉(zhuǎn)載都請(qǐng)聯(lián)系作者獲得授權(quán)并注明出處柑司。

#showDiv{width:500px;height:350px;background: dodgerblue;margin:1000pxauto0;? ? ? ? ? }? ? ? ? ? ? @-webkit-keyframesfadeInLeft {? ? ? ? ? ? 0% {opacity:0;-webkit-transform:translate3d(-100%, 0, 0);transform:translate3d(-100%, 0, 0);? ? ? ? ? }? ? ? ? ? ? 100% {opacity:1;-webkit-transform: none;transform: none;? ? ? ? ? ? }? ? ? ? ? }? ? ? ? ? ? @keyframesfadeInLeft {from{opacity:0;-webkit-transform:translate3d(-100%, 0, 0);transform:translate3d(-100%, 0, 0);? ? ? ? ? ? }to{opacity:1;-webkit-transform: none;transform: none;? ? ? ? ? ? }? ? ? ? ? }.fadeInLeft{animation: fadeInLeft2sease;-webkit-animation: fadeInLeft2sease;? ? ? ? ? }

.scrolldiv{width:500px;height:400px;margin:1000pxauto100pxauto;background:#FF0000;? ? ? ? }