JS動(dòng)態(tài)解析瀏覽器和網(wǎng)頁(yè)的各種寬高屬性

galois 發(fā)布于2019-08-30 11:19 / 3150人閱讀

摘要：獲得各種寬高的屬性還有公式網(wǎng)頁(yè)可見(jiàn)區(qū)域高滾動(dòng)條寬度測(cè)試的文字網(wǎng)頁(yè)可見(jiàn)區(qū)域?qū)挐L動(dòng)條寬度測(cè)試的文字的總高度滾動(dòng)條寬度邊框?qū)挾葴y(cè)試的文字的總寬度滾動(dòng)條寬度邊框?qū)挾葴y(cè)試的文字的解釋元素內(nèi)容高度的度量，包括由于溢出導(dǎo)致的視圖中不可見(jiàn)內(nèi)容滾動(dòng)總高度

獲得各種寬高的屬性還有公式

    body {
        padding: 50px;
        height: 500px;
        border: 1px dotted red;
        overflow: scroll;
    }
    span {
        color: blue;
    }


    網(wǎng)頁(yè)可見(jiàn)區(qū)域高document.body.clientHeight=height + padding * 2- 滾動(dòng)條寬度測(cè)試的文字12
    網(wǎng)頁(yè)可見(jiàn)區(qū)域?qū)抎ocument.body.clientWidth=width + padding * 2- 滾動(dòng)條寬度測(cè)試的文字12
    body的總高度document.body.offsetHeight= height+border*2+padding*2 = clientHeight + 滾動(dòng)條寬度 + 邊框?qū)挾?2測(cè)試的文字12
    body的總寬度document.body.offsetWidth= width+border*2+padding*2 = clientWidth + 滾動(dòng)條寬度 + 邊框?qū)挾?2測(cè)試的文字12

    scrollHeight的MDN解釋?zhuān)涸貎?nèi)容高度的度量，包括由于溢出導(dǎo)致的視圖中不可見(jiàn)內(nèi)容
    滾動(dòng)總高度document.body.scrollHeight測(cè)試的文字12
    滾動(dòng)的高度document.body.scrollTop測(cè)試的文字12
    滾動(dòng)總寬度document.body.scrollWidth測(cè)試的文字12

    瀏覽器可視窗口的高度，不包括邊框、工具欄、調(diào)試窗口（可變）window.innerHeight測(cè)試的文字12
    瀏覽器可視窗口的寬度，不包括邊框（可變）window.innerWidth測(cè)試的文字12
    瀏覽器窗口的寬度，包括滾動(dòng)條和邊框（可變）window.outerHeight測(cè)試的文字12
    瀏覽器窗口的高度，包括邊框、工具欄（可變）window.outerWidth測(cè)試的文字12

    屏幕物理分辨率高（不變）window.screen.height=window.screen.availHeight+windows上下任務(wù)欄測(cè)試的文字12
    屏幕物理分辨率寬（不變）window.screen.width=window.screen.availHeight+windows左右任務(wù)欄測(cè)試的文字12
    瀏覽器窗口的可用高度，不包括windows任務(wù)欄（可變）window.screen.availHeight測(cè)試的文字12
    瀏覽器窗口的可用寬度，不包括windows任務(wù)欄（可變）window.screen.availWidth測(cè)試的文字12
    瀏覽器窗口距離顯示屏上部高度（可變） window.screenTop測(cè)試的文字12
    瀏覽器窗口距離顯示屏下部高度（可變） window.screenLeft測(cè)試的文字12

現(xiàn)在我們來(lái)動(dòng)態(tài)監(jiān)視它們的變化 添加各種監(jiān)聽(tīng)事件來(lái)監(jiān)聽(tīng)當(dāng)瀏覽器大小發(fā)生改變時(shí)各種數(shù)據(jù)的變化規(guī)律

    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();
    }//瀏覽器位置變化了之后我們點(diǎn)擊body來(lái)獲取變化

用原生JS來(lái)獲取值

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

    }

我們可以做進(jìn)一步的封裝，用策略模式寫(xiě)出一個(gè)頁(yè)面寬高檢測(cè)器

這可以查看http://jianjiacheng.com/brows...

GPU云服務(wù)器云服務(wù)器各種瀏覽器兼容js js 動(dòng)態(tài)網(wǎng)頁(yè)數(shù)據(jù) 動(dòng)態(tài)網(wǎng)頁(yè)數(shù)據(jù)js js 中各種數(shù)據(jù)類(lèi)型的比較

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/114914.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

galois

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

如何查看tensorflow版本

閱讀 7670·2023-04-25 14:36
萬(wàn)人千題計(jì)劃-32

閱讀 1763·2021-11-22 09:34
Chrome 文字低于12px的解決方案

閱讀 2155·2019-08-30 15:55
JS動(dòng)態(tài)解析瀏覽器和網(wǎng)頁(yè)的各種寬高屬性

閱讀 3151·2019-08-30 11:19
記大四以來(lái)的前端面試

閱讀 1311·2019-08-29 15:17
Python3.5源碼編譯.exe

閱讀 553·2019-08-29 12:47
19/3/29學(xué)習(xí)筆記

閱讀 2997·2019-08-26 13:38
數(shù)據(jù)結(jié)構(gòu)知否知否系列之 — 隊(duì)列篇

閱讀 2630·2019-08-26 11:00

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

JS動(dòng)態(tài)解析瀏覽器和網(wǎng)頁(yè)的各種寬高屬性

相關(guān)文章