波多野结衣一区二区三区高清,国产精品久久777777,亚洲精品久久久久毛卡片

寫在前面：

Window和document對象的區別

window對象表示瀏覽器中打開的窗口

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

document對象是window對象的一部分, 可以寫成window.document.body = document.body

瀏覽器的HTML文檔成為Document對象

window.location和document.location

window.location == document.location //true

在iframe中也是全等的

一、與window相關的高寬

window.innerWidth

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

window.outerWidth

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

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

window.screen.height? 整個屏幕的高

window.screen.width

window.screen.availHeight 去掉mac上無線網音量圖標? 去掉windows下面資源管理器一塊

window.screen.availWidth

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

window.screenLeft 瀏覽器距離最左側的距離

window相關的高寬兼容性表述

innerHeight IE9+

outerHeight IE9+

對于IE8,7,6,5? 代替innerHeight 和 innerWidth

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

二、document相關的寬高

1、與client相關的寬高

document.body.clientWidth

1)元素可視部分的寬, 即padding+content, 如果沒有滾動條,就是元素設定的寬高

2)如果有滾動條,滾動條覆蓋元素的寬高, 該屬性就是元素本來寬高減去滾動條寬高

document.body.clientHeight

document.body.clientLeft

返回元素周圍邊框的厚度border, 如果不指定一個邊框或者不定位該元素,其值就是0

clientTop = border-top的寬

clientLeft = border-left的寬

document.body.clientTop

2、與offset相關的寬高

document.body.offsetWidth

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

該屬性和其內部的內容是否超出元素的大小無關, 只和本來設定的border以及width和height有關

假如沒有無padding無滾動無border offsetWidth = clientWidth = style.width

假如有padding無滾動有border offsetWidth=style.width+style.aadding2+(borderWidth)2

假如有padding有滾動 offsetWidth = style.width + style.padding2 + borderWidth2 或者

offsetWidth = clientWidth + 滾動軸寬度 + border寬度*2

document.body.offsetHeight

document.body.offsetLeft

offsetParent 如果當前元素的父級元素沒有進行css定位(position為absolute或者relative), offsetParent為body

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

兼容性問題

在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寬度)

document.body.offsetTop

3、與scroll相關的寬高

document.body.scrollWidth document.body.scrollHeight? 針對body 的scrollWidth和scrollHeight

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

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

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

oDiv.scrollWidth oDiv.scrollHeight 針對某個div的情況

在無滾動軸的情況下, scrollWidth= clientWidth = style.width + style.padding*2

有滾動軸的情況下, scrollWidth = 實際內容的寬度 + padding2, scrollHeight = 實際內容的高度+padding2

document.body.scrollLeft document.body.scrollTop

該屬性是可讀寫的, 值得是當元素其中的內容超出其寬高的時候, 元素被卷起的高度和寬度

document, documentElement, body

document.documentElement = html

document.documentElement.childeNodes[1] = body

document.body = body

document寬高兼容問題

client 各個瀏覽器的解析都一樣

獲取可視區域的寬高的時候, document.documentElement.clientWidth || document.body.clientWidth

offset

offsetLeft offsetTop有兼容性問題

offsetHeight offsetWidth 各個瀏覽器解析基本一致

scroll

在ff下 document.body.scrollHeight 將body當做一個div來處理,這里會有點不同? 如果是在div下面是一樣的

三、event對象中五種坐標

1、clientX和clientY

可視區域的, 相對于瀏覽器(可視區域左上角0,0)的坐標

鼠標相對于瀏覽器窗口可視區域的X，Y坐標（窗口坐標），可視區域不包括工具欄和滾動條。IE事件和標準事件都定義了這2個屬性

2、screenX和screenY

鼠標相對于設備屏幕左上角(0,0)的坐標

3、offsetX和offsetY

鼠標相對于事件源左上角(0,0)的坐標

4、pageX和pageY

鼠標相對于整個網頁左上角(0,0)的坐標 (比如滾上去的區域也算在里面)

這2個屬性不是標準屬性，但得到了廣泛支持。IE事件中沒有這2個屬性。

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

計算滾動軸的寬度

mac 下滾動軸是不占用寬度的會消失

但是windows系統下滾動軸是占用一定寬度的\

offsetWidth是包含滾動軸的 clientWidth如果文檔有滾動軸是要減去滾動軸的

scrollWidth = el.offsetWidth - el.clientWidth;

// 通過offsetWidth - clientWidth計算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())

添加滾動軸 clientWidth會變

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;// 沒有滾動軸下的寬度el.style.overflowY ="scroll"varclientWidth2 = el.clientWidth;//添加了滾動軸之后的寬度varscrollBarWidth = clientWidth1 - clientWidth2;? el.remove();returnscrollBarWidth;}console.log(getScrollBar())

jQuery寬高理解

.width()? .height()

不包括padding border margin

可讀寫的 (對于document和window 只能讀不能寫)

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

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

width返回的結果是沒有單位的

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

.innerWidth()? .innerHeight()

在element的基礎上包括了padding 但是不包括border margin

對于document和window是只讀的不寫的

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

.outerWidth()? .outerHeight()

outerHeight(true) 是包含border和margin的

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

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

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

scrollLeft和scrollTop()

和js的是一樣的

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

scrollTop() 相對于縱向滾動條上邊的距離, 如果滾動條非常上, 或者元素不能滾動, 那么這個值為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是可視區域的高度隨著窗口變化而變化 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 但是設置了屬性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())//輸出滾動軸卷曲的高度})? ? $(".parentDiv").scroll(function(){console.log($(this).scrollTop())//輸出滾動軸卷曲的高度})//offset position

offset() .position()

offset(): 相對于document的當前坐標值(相對于body左上角的left和top值)

position(): 相對于offsetParent()(最近的一個父級有position屬性)的一個偏移坐標值

jQuery寬高理解應用

可視區域的加載

#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(){// 獲取可視區域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");? ? }? });

滾動到底部加載頂部

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

作者：FConfidence

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

來源：簡書

簡書著作權歸作者所有，任何形式的轉載都請聯系作者獲得授權并注明出處。

#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;? ? ? ? }

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

JS中寬高總結

JS中寬高總結

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

JS中寬高總結

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频