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日

相关文章

  • Javascript Math acos() 方法

    JavaScript中的Math.acos()方法用于返回一个数的反余弦值,即弧度值。该方法接受一个参数,即要计算反余弦值的数值。以下是关于Math.acos()方法的整攻略,包括两个示例。 JavaScript Math对象的acos()方法 JavaScript Math对象中的acos()方法用于返回一个数的余弦值,即弧度值。该方法接受一个参数,即要计…

    JavaScript 2023年5月11日
    00
  • JavaScript中for循环的使用详解

    JavaScript中for循环的使用详解 在JavaScript中,循环是一种重要的编程语言结构,for循环是最常用的循环语句之一,可以用来实现对数组、对象、字符串等类型的数据进行遍历,下面我们来详细讲解一下JavaScript中for循环的使用。 基本语法 for循环的基本语法如下: for (初始化表达式; 条件表达式; 递增表达式) { // 循环体…

    JavaScript 2023年5月28日
    00
  • vue之带参数跳转打开新页面、新窗口

    我将为您讲解“Vue之带参数跳转打开新页面、新窗口”的完整攻略。 前言 在Vue开发过程中,难免会遇到需要在新页面或者新窗口中打开链接的场景。而且可能还需要携带参数。本文将为您介绍Vue中如何带参数跳转打开新页面、新窗口。 解决方案 路由跳转 在Vue中进行路由跳转,可以使用Vue Router实现。当需要携带参数时,我们可以在路由跳转时将参数以query(…

    JavaScript 2023年6月11日
    00
  • JS ES6多行字符串与连接字符串的表示方法

    JS ES6多行字符串与连接字符串的表示方法可以使用模板字面量(Template literal)表示。以反引号(`)为开始和结束字符的字符串都是模板字面量。 在模板字面量中使用多行字符串,可以直接使用换行符(\n)或回车符(\r)实现,不需要使用转义符(\)。 在模板字面量中使用连接字符串,可以使用${}包裹表达式,实现字符串拼接。 以下是JS ES6多行…

    JavaScript 2023年5月28日
    00
  • JS定时器实现数值从0到10来回变化

    实现数值从0到10来回变化,可以通过JavaScript中的定时器来实现。具体步骤如下: 使用JavaScript的setInterval()方法创建一个定时器。该方法接受两个参数:要执行的代码块和时间间隔,单位是毫秒。 创建一个计数器变量,初始值设为0,每当定时器触发时,将计数器加1,并将该数值显示在页面上。 设定一个条件,当计数器的值为10时,将其减1,…

    JavaScript 2023年6月11日
    00
  • 老生常谈ES6中的类

    ES6中的类是JavaScript语言中的一种新的语法糖,它提供了一种更加优雅的面向对象的编程方式,让JavaScript变得更加易读、易维护。在ES6之前,我们在JavaScript中实现继承是通过原型链来实现的。但是这种方式缺少了一个明确的语法结构,不够直观,而且容易出现错误。ES6中引入了类的概念,让我们能够更加方便、清晰地定义类和继承关系。下面我将详…

    JavaScript 2023年6月11日
    00
  • JavaScript中in和hasOwnProperty区别详解

    下面是针对这个主题的详细讲解: JavaScript中in和hasOwnProperty区别详解 what is in in 关键字可以用于判断一个对象是否具有某个属性,或者一个数组中是否包含某个元素。其用法如下: propertyNameOrIndex in objectOrArray 这里propertyNameOrIndex代表要查找的属性名或者数组中…

    JavaScript 2023年6月11日
    00
  • JavaScript 面向对象之命名空间

    JavaScript 面向对象之命名空间 JavaScript 是一门支持面向对象编程的语言,但在实践中,我们发现 JavaScript 的命名空间机制并不完整或者说不够严谨。因此,我们可以借助 Object 对象和函数声明的方式来实现 JavaScript 的命名空间。 命名空间的概念 命名空间是一个用于“组织代码”的容器,它类似于文件系统中文件夹的概念,…

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