摘要:獲得各種寬高的屬性還有公式網(wǎng)頁可見區(qū)域高滾動條寬度測試的文字網(wǎng)頁可見區(qū)域?qū)挐L動條寬度測試的文字的總高度滾動條寬度邊框?qū)挾葴y試的文字的總寬度滾動條寬度邊框?qū)挾葴y試的文字的解釋元素內(nèi)容高度的度量,包括由于溢出導致的視圖中不可見內(nèi)容滾動總高度
獲得各種寬高的屬性還有公式
body { padding: 50px; height: 500px; border: 1px dotted red; overflow: scroll; } span { color: blue; }現(xiàn)在我們來動態(tài)監(jiān)視它們的變化 添加各種監(jiān)聽事件來監(jiān)聽當瀏覽器大小發(fā)生改變時各種數(shù)據(jù)的變化規(guī)律網(wǎng)頁可見區(qū)域高document.body.clientHeight=height + padding * 2- 滾動條寬度測試的文字12網(wǎng)頁可見區(qū)域?qū)抎ocument.body.clientWidth=width + padding * 2- 滾動條寬度測試的文字12body的總高度document.body.offsetHeight= height+border*2+padding*2 = clientHeight + 滾動條寬度 + 邊框?qū)挾?2測試的文字12body的總寬度document.body.offsetWidth= width+border*2+padding*2 = clientWidth + 滾動條寬度 + 邊框?qū)挾?2測試的文字12scrollHeight的MDN解釋:元素內(nèi)容高度的度量,包括由于溢出導致的視圖中不可見內(nèi)容滾動總高度document.body.scrollHeight測試的文字12滾動的高度document.body.scrollTop測試的文字12滾動總寬度document.body.scrollWidth測試的文字12瀏覽器可視窗口的高度,不包括邊框、工具欄、調(diào)試窗口(可變)window.innerHeight測試的文字12瀏覽器可視窗口的寬度,不包括邊框(可變)window.innerWidth測試的文字12瀏覽器窗口的寬度,包括滾動條和邊框(可變)window.outerHeight測試的文字12瀏覽器窗口的高度,包括邊框、工具欄(可變)window.outerWidth測試的文字12屏幕物理分辨率高(不變)window.screen.height=window.screen.availHeight+windows上下任務欄測試的文字12屏幕物理分辨率寬(不變)window.screen.width=window.screen.availHeight+windows左右任務欄測試的文字12瀏覽器窗口的可用高度,不包括windows任務欄(可變)window.screen.availHeight測試的文字12瀏覽器窗口的可用寬度,不包括windows任務欄(可變)window.screen.availWidth測試的文字12瀏覽器窗口距離顯示屏上部高度(可變) window.screenTop測試的文字12瀏覽器窗口距離顯示屏下部高度(可變) window.screenLeft測試的文字12
function body_scroll(){ console.log(this) console.log(document.body.scrollTop) } window.onload = function () { dataUpdate(); } window.onresize = function () { dataUpdate(); } window.onscroll = function () { console.log("window.onscroll") dataUpdate(); } document.body.onclick =function () { dataUpdate(); }//瀏覽器位置變化了之后我們點擊body來獲取變化用原生JS來獲取值
function dataUpdate() { var client_height = document.getElementById("span_client_height"); client_height.innerText = document.body.clientHeight||document.documentElement.clientHeight; var client_width = document.getElementById("span_client_width"); client_width.innerText = document.body.clientWidth||document.documentElement.clientWidth; var client_offsetHeight = document.getElementById("span_client_offsetHeight"); client_offsetHeight.innerText = document.body.offsetHeight; var client_offsetWidth = document.getElementById("span_client_offsetWidth"); client_offsetWidth.innerText = document.body.offsetWidth; var client_scrollHeight = document.getElementById("span_client_scrollHeight"); client_scrollHeight.innerText = document.body.scrollHeight; var client_scrollTop = document.getElementById("span_client_scrollTop"); client_scrollTop.innerText = document.body.scrollTop; var client_scrollWidth = document.getElementById("span_client_scrollWidth"); client_scrollWidth.innerText = document.body.scrollWidth; var window_innerHeight = document.getElementById("span_inner_height"); window_innerHeight.innerText = window.innerHeight; var window_innerWidth = document.getElementById("span_inner_width"); window_innerWidth.innerText = window.innerWidth; var window_outerHeight = document.getElementById("span_outer_height"); window_outerHeight.innerText = window.outerHeight; var window_outerWidth = document.getElementById("span_outer_width"); window_outerWidth.innerText = window.outerWidth; var screen_height = document.getElementById("span_screen_height"); screen_height.innerText = window.screen.height; var screen_width = document.getElementById("span_screen_width"); screen_width.innerText = window.screen.width; var screen_availHeight = document.getElementById("span_screen_availHeight"); screen_availHeight.innerText = window.screen.availHeight; var screen_availWidth = document.getElementById("span_screen_availWidth"); screen_availWidth.innerText = window.screen.availWidth; var window_top = document.getElementById("span_window_top") window_top.innerText = window.screenTop var window_left = document.getElementById("span_window_left") window_left.innerText = window.screenLeft }我們可以做進一步的封裝,用策略模式寫出一個頁面寬高檢測器
這可以查看http://jianjiacheng.com/brows...
文章版權歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/54122.html
摘要:獲得各種寬高的屬性還有公式網(wǎng)頁可見區(qū)域高滾動條寬度測試的文字網(wǎng)頁可見區(qū)域?qū)挐L動條寬度測試的文字的總高度滾動條寬度邊框?qū)挾葴y試的文字的總寬度滾動條寬度邊框?qū)挾葴y試的文字的解釋元素內(nèi)容高度的度量,包括由于溢出導致的視圖中不可見內(nèi)容滾動總高度 獲得各種寬高的屬性還有公式 body { padding: 50px; height: 500px; ...
摘要:獲得各種寬高的屬性還有公式網(wǎng)頁可見區(qū)域高滾動條寬度測試的文字網(wǎng)頁可見區(qū)域?qū)挐L動條寬度測試的文字的總高度滾動條寬度邊框?qū)挾葴y試的文字的總寬度滾動條寬度邊框?qū)挾葴y試的文字的解釋元素內(nèi)容高度的度量,包括由于溢出導致的視圖中不可見內(nèi)容滾動總高度 獲得各種寬高的屬性還有公式 body { padding: 50px; height: 500px; ...
摘要:下各種寬高和下寬高分為掛載在對象和對象下的寬高屬性,先說下和的區(qū)別對象表示瀏覽器中打開的窗口,對象可以省略,比如可以簡寫為對象是對象的一部分,那么我們可以寫成,瀏覽器的文檔成為對象下的寬高屬性瀏覽器窗口內(nèi)部寬度瀏覽器窗口內(nèi)部高度瀏覽器窗口外 JS下各種寬高 Window和Document:JS下寬高分為掛載在Window對象和Document對象下的寬高屬性,先說下Window和Do...
摘要:優(yōu)點是繼承了父類的模板,又繼承了父類的原型對象,缺點就是父類實例傳參,不是子類實例化傳參,不符合常規(guī)語言的寫法使用的方式繼承了父類的模板,不繼承了父類的原型對象。優(yōu)點是方便了子類實例傳參,缺點就是不繼承了父類的原型對 github版本戳,求star,follow 前端目錄 HTML相關 CSS相關 JAVASCRIPT相關 DOM相關 HTTP相關 VUE相關 算法相關 網(wǎng)絡安全相關...
摘要:優(yōu)點是繼承了父類的模板,又繼承了父類的原型對象,缺點就是父類實例傳參,不是子類實例化傳參,不符合常規(guī)語言的寫法使用的方式繼承了父類的模板,不繼承了父類的原型對象。優(yōu)點是方便了子類實例傳參,缺點就是不繼承了父類的原型對 github版本戳,求star,follow 前端目錄 HTML相關 CSS相關 JAVASCRIPT相關 DOM相關 HTTP相關 VUE相關 算法相關 網(wǎng)絡安全相關...
閱讀 2849·2021-08-20 09:37
閱讀 1607·2019-08-30 12:47
閱讀 1090·2019-08-29 13:27
閱讀 1685·2019-08-28 18:02
閱讀 749·2019-08-23 18:15
閱讀 3084·2019-08-23 16:51
閱讀 931·2019-08-23 14:13
閱讀 2125·2019-08-23 13:05