JS与Jquery获取屏幕、浏览器、页面的宽度和高度对比整理

获取屏幕、浏览器、页面的宽度和高度是前端开发中常见的需求,Javascript和jQuery都提供了相关的API来实现这个功能。下面我们来一步步剖析如何获取宽高以及它们之间的区别。

获取屏幕宽高(Javascript)

可以使用window.screen对象来获取屏幕的宽高。

var screenWidth = window.screen.width; // 屏幕宽度
var screenHeight = window.screen.height; // 屏幕高度

获取浏览器窗口宽高(Javascript)

可以使用window.innerWidth和window.innerHeight对象获取浏览器窗口的宽高。但是,这些对象的值包含滚动条所占的宽或高,所以要获取不包含滚动条的宽高,还要排除滚动条的宽高。如下所示:

var bodyWidth = document.body.clientWidth; // 浏览器可视区域宽度
var bodyHeight = document.body.clientHeight; // 浏览器可视区域高度
var documentWidth = document.documentElement.clientWidth; // 浏览器窗口文档对象宽度
var documentHeight = document.documentElement.clientHeight; // 浏览器窗口文档对象高度

获取页面宽高(Javascript)

可以使用document对象获取页面文档的宽高。

var pageWidth = document.documentElement.scrollWidth; // 页面文档对象宽度
var pageHeight = document.documentElement.scrollHeight; // 页面文档对象高度

获取屏幕、浏览器、页面的宽度和高度(jQuery)

当然,jQuery也提供了获取屏幕、浏览器、页面宽高的API,使用方法如下:

var screenWidth = $(window).width(); // 屏幕宽度
var screenHeight = $(window).height(); // 屏幕高度
var bodyWidth = $(document.body).width(); // 浏览器可视区域宽度
var bodyHeight = $(document.body).height(); // 浏览器可视区域高度
var documentWidth = $(document).width(); // 浏览器窗口文档对象宽度
var documentHeight = $(document).height(); // 浏览器窗口文档对象高度
var pageWidth = $(document.body)[0].scrollWidth; // 页面文档对象宽度
var pageHeight = $(document.body)[0].scrollHeight; // 页面文档对象高度

需要注意的是,通过jQuery获取的值不包含滚动条所占的宽高,如要获取包含滚动条的宽高,还要加上滚动条的宽高。

示例说明:

<!DOCTYPE html>
<html>
<head>
    <title>Demo</title>
    <meta charset="UTF-8">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <style>
        body {
            width: 1000px;
            height: 5000px;
        }
        .page {
            margin: 30px auto;
            width: 80%;
            height: 500px;
            background-color: #e5e5e5;
            line-height: 500px;
            text-align: center;
            font-size: 50px;
        }
    </style>
</head>
<body>
    <div class="page">1</div>
    <div class="page">2</div>
    <div class="page">3</div>
    <script>
        console.log(window.screen.width, window.screen.height);
        console.log(document.body.clientWidth, document.body.clientHeight);
        console.log(document.documentElement.clientWidth, document.documentElement.clientHeight);
        console.log(document.body.scrollWidth, document.body.scrollHeight);

        console.log($(window).width(), $(window).height());
        console.log($(document.body).width(), $(document.body).height());
        console.log($(document).width(), $(document).height());
        console.log($(document.body)[0].scrollWidth, $(document.body)[0].scrollHeight);
    </script>
</body>
</html>

在浏览器中打开这个html文件,可以看到浏览器窗口的宽度和高度,以及页面文档对象的宽度和高度分别被输出在控制台中。同时,还能看到页面展示出了三个高度为500px的块,可以通过观察结果证明所获取的宽高值是正确的。

总之,了解如何获取屏幕、浏览器、页面的宽度和高度,并且能够根据实际需求选取合适的API,是前端开发必备的技能之一。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JS与Jquery获取屏幕、浏览器、页面的宽度和高度对比整理 - Python技术站

(0)
上一篇 2023年6月11日
下一篇 2023年6月11日

相关文章

  • js特殊字符转义介绍

    JS特殊字符转义介绍 在JavaScript编程中,有一些字符是具有特殊含义的,如引号、斜线、换行符等。为了能够在代码中使用这些特殊字符,需要对它们进行转义。本篇攻略将介绍JS特殊字符转义的相关知识。 特殊字符转义表 在JavaScript中,特殊字符可以通过转义方法表示为普通字符,具体的转义方法如下表所示: 字符 转义字符 \ \ ‘ \’ ” \” \n…

    JavaScript 2023年5月28日
    00
  • js实现数组转换成json

    要实现将数组转换成JSON格式,我们需要使用Javascript内置的JSON对象来进行转换操作。下面是实现数组转换成JSON的完整攻略: 1. 了解JSON对象 在Javascript中,JSON是一个对象,用于处理JSON格式的数据。JSON对象拥有两个方法:stringify()和parse()。stringify()将Json对象转换为json字符串…

    JavaScript 2023年5月27日
    00
  • JavaScript删除字符串中指定字符的4种方法汇总

    JavaScript删除字符串中指定字符的4种方法汇总 在 JavaScript 中,我们可以通过不同的方法实现删除字符串中指定字符的操作。本文将为你介绍四种常见的方法,分别是: 使用 replace() 方法 使用 split() 和 join() 方法 使用正则表达式 使用字符串切片 接下来我们会一一介绍这些方法,并给出具体的实现示例。 方法一:使用 r…

    JavaScript 2023年5月28日
    00
  • Javascript ES6中对象类型Sets的介绍与使用详解

    Javascript ES6中对象类型Sets的介绍与使用详解 1. 什么是Sets? Sets是JavaScript中的一种数据结构,它是一个集合,存储不重复的数据。和数组相似,它也是一组有序的数据,但是它有以下区别:- Sets中的数据是唯一的- Sets中的数据是无序的 2. Sets常用的方法 2.1 创建一个Set 可以利用new Set()来创建…

    JavaScript 2023年5月27日
    00
  • JavaScript函数中this指向问题详解

    下面就为您详细讲解“JavaScript函数中this指向问题详解”的完整攻略。 JavaScript函数中this指向问题详解 在JavaScript中,函数的this指向经常导致开发人员困惑。本文将详细介绍JavaScript中函数的this指向问题。了解这些概念和最佳实践有助于轻松编写高效的JavaScript代码。 什么是this? 在JavaScr…

    JavaScript 2023年6月10日
    00
  • 浅谈layui框架自带分页和表格重载的接口解析问题

    浅谈layui框架自带分页和表格重载的接口解析问题 什么是layui框架? layui是一个基于jQuery开发的前端UI框架,它强调简洁、易用、兼容性好。layui内置了众多常用的UI组件,可以快速构建出美观的网页界面。 layui自带分页和表格重载的接口 layui框架自带了一些常用的接口,其中包括分页和表格重载的接口。这些接口可以方便我们对分页和表格进…

    JavaScript 2023年6月11日
    00
  • 从vue-router看前端路由的两种实现

    从vue-router看前端路由的两种实现 前端路由是现代前端开发中非常重要的一部分,它实现了单页应用(SPA)的核心功能,目前主流的前端框架如Angular、React、Vue等都实现了自己的路由组件。其中,Vue框架中自带的路由组件vue-router是应用广泛的一种。在vue-router的实现中,涉及到两种不同的前端路由实现方式。下面我们分别来讲解一…

    JavaScript 2023年6月11日
    00
  • JS数组(Array)处理函数整理

    JS数组(Array)处理函数整理 在JavaScript中,数组(Array)是非常常见且重要的数据类型。它可以用来存储一组有序的数据,方便数据的访问以及数据的操作。本文将对常用的JS数组处理函数进行整理,并给出一些示例说明。 forEach() forEach()方法是一个数组的遍历方法,可以用来依次访问数组中的元素,并对每一个元素执行给定的操作。用法如…

    JavaScript 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部