美文网首页JavaScriptWeb前端小白的全栈之路
获取视口的尺寸-JavaScript函数封装

获取视口的尺寸-JavaScript函数封装

作者: MaCong | 来源:发表于2023-07-18 13:44 被阅读0次

点击JavaScript查看更多...

获取视口的尺寸

用法:handGetViewportOffset()

// 窗口初始化后调用,获取视口的w和h
const handGetViewportOffset = () => {
    if (window.innerWidth) {
        
        return {
            w: window.innerWidth,
            h: window.innerHeight
        }
    } else {
        // ie8及其以下
        if (document.compatMode === "BackCompat") {
            // 怪异模式
            return {
                w: document.body.clientWidth,
                h: document.body.clientHeight
            }
        } else {
            // 标准模式
            return {
                w: document.documentElement.clientWidth,
                h: document.documentElement.clientHeight
            }
        }
    }
}

更多方法尽在专题JavaScript

相关文章

  • 移动端页面开发

    布局视口 在PC端,布局视口就是浏览器窗口 视口的宽度 = 浏览器窗口的宽度 通过以下JavaScript代码获取...

  • 常用的JavaScript方法封装

    1、获得滚动条的滚动距离 2、获得视口的尺寸 3、封装自己的forEach方法 4、封装自己的filter方法 5...

  • 封装获取元素位置的函数

    封装获取元素位置的函数 原文https://www.w3cplus.com/javascript/get-elem...

  • JavaScript获取视口宽高

    window对象和document对象 window对象表示浏览器打开的窗口,window可省略,常见的windo...

  • 12 js07 window系列方法,脚本化CSS

    滚动条移动距离、获取可视窗口属性、获取dom元素尺寸、滚动条系列方法、脚本化CSS 【封装函数,形成工具库tool...

  • 获取高度相关API

    获取页面已经滚动的高度: 获取body全部内容高度: 获取布局视口高度: 获取视图视口高度:

  • JavaScript笔记

    代码笔记 JavaScript 封装自己的log函数 eg普通封装var log = function() { ...

  • 获取不同浏览器下视口的尺寸

    概述 最近在学习JavaScript高级程序设计(第三版)时,学习了获取不同浏览器中视口的大小,为了方便以后查阅,...

  • js获取当前文档视口高度

    function autodivheight() { //函数:获取尺寸 //获取浏览器窗口高度 var ...

  • JQuery简介

    一、什么是JQuery jQuery是一个JavaScript库,它通过封装原生的JavaScript函数...

网友评论

    本文标题:获取视口的尺寸-JavaScript函数封装

    本文链接:https://www.haomeiwen.com/subject/ivpnudtx.html