网页中的宽高度的分类介绍

一、页面的实际宽度和高度读取

计算页面实际官款和高度的代码如下所所示：


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery-3.6.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(
        function () {
            //页面的实际高度
            var v = document.documentElement.offsetHeight;
            alert("实际高度"+v);
            //页面的实际宽度
            v = document.documentElement.offsetWidth;
            alert("实际宽度" + v);           
 
        }
        );
    </script>
    <style>
    body
    {margin:0px;
     padding:0px;
        
        }
    </style>
</head>
<body >
    <div style="height: 100px; margin:0px ; padding:0px">
    </div>
</body>
</html>

代码运行结果如下

二、眼睛能见的高度和宽度

计算视口高度和视口宽度的代码如下


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery-3.6.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(
        function () {
           
            //视口高度
            var y_v = window.innerHeight;
            //视口宽度
            var y_h = window.innerWidth;
            alert("视口高度" + y_v + "-" + "视口宽度" + y_h);
            //    
 
        }
        );
    </script>
    <style>
    body
    {margin:0px;
     padding:0px;
        
        }
    </style>
</head>
<body >
    <div style="height: 3000px; margin:0px ; padding:0px; background-color:Red">
 
 
      <div style="background-color:Black;  height:900px">11
      </div>
    </div>
</body>
</html>

代码运行结果如下：

三、页面相对于左上角的横纵坐标（眼睛看到的部分）

通过js计算网页元素距离左上角的横坐标和纵坐标，代码如下所示


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery-3.6.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(
        function () {
           
            //网页元素距离左上角的视口横坐标
 
            var x_coor = document.getElementById("fm").getBoundingClientRect().left;           
            var y_coor = document.getElementById("fm").getBoundingClientRect().top;          
            alert("网页元素距离左上角的视口横坐标" + x_coor + "-" + "网页元素距离左上角的视口纵坐标" + y_coor);
        }
        );
    </script>
    <style>
        body
        {
        
            padding: 0px; 
        }
    </style>
</head>
<body if="fm">
    <div style="height: 3000px; margin: 0px; padding: 0px; background-color: Red">
        <ul style="background-color: Black; height: 900px; color: White" id="div">
            <li>sdfsdfsdfds </li>
        </ul>
    </div>
    <div id="se"></div>
</body>
</html>

代码运行结果如下：

四、页面上相对于左上角的横纵坐标（实际页面的大小）

通过js计算网页元素距离左上角的横坐标和纵坐标(页面的实际)，代码如下所示


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery-3.6.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(
        function () {
            
 
 
            //网页元素距离左上角的实际横坐标和纵坐标
            //两种情况：在标准模式下，即文档头部有 doctype 声明，浏览器滚动条是属于 html 元素的，只能通过 document.documentElement.scrollTop 获取滚动距离。在怪异模式下，即文档头部没有 doctype 声明，浏览器滚动条数属于 body，因此通过 document.body.scrollTop 获取滚动距离。
 
            //本例子设置了文档头部
            var scrollLeft = document.compatMode == "CSS1Compat" ? document.documentElement.scrollLeft : document.body.scrollLeft;
            var scrollTop = document.compatMode == "CSS1Compat" ? document.documentElement.scrollTop : document.body.scrollTop;
 
            var x_r_coor = document.getElementById("fm").getBoundingClientRect().left + scrollLeft;
            var y_r_coor = document.getElementById("fm").getBoundingClientRect().top + scrollTop;
            alert("网页元素距离左上角的实际横坐标：" + x_r_coor + "-" + "网页元素距离左上角的实际纵坐标：" + y_r_coor);
          
        }
        );
    </script>
    <style type="text/css">
        body
        {
        
            padding: 0px; 
        }
    </style>
</head>
<body id="fm">
    <div style="height: 3000px; margin: 0px; padding: 0px; background-color: Red">
        <ul style="background-color: Black; height: 900px; color: White" id="div">
            <li>sdfsdfsdfds </li>
        </ul>
    </div>
    <div id="se"></div>
</body>
</html>

重点说明：两种情况：在标准模式下，即文档头部有 doctype 声明，浏览器滚动条是属于 html 元素的，只能通过 document.documentElement.scrollTop 获取滚动距离。在怪异模式下，即文档头部没有 doctype 声明，浏览器滚动条数属于 body，因此通过 document.body.scrollTop 获取滚动距离。

代码运行结果如下：

五、页面滚动条移动的距离

网页滚动的水平距离和网页滚动的垂直距离代码如下：


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery-3.6.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(
        function () {
    
 
            //网页滚动的水平距离和网页滚动的垂直距离
            //两种情况：在标准模式下，即文档头部有 doctype 声明，浏览器滚动条是属于 html 元素的，只能通过 document.documentElement.scrollTop 获取滚动距离。在怪异模式下，即文档头部没有 doctype 声明，浏览器滚动条数属于 body，因此通过 document.body.scrollTop 获取滚动距离。
 
            //本例子设置了文档头部
            var scrollLeft_distance = document.compatMode == "CSS1Compat" ? document.documentElement.scrollLeft : document.body.scrollLeft;
            var scrollTop_distance = document.compatMode == "CSS1Compat" ? document.documentElement.scrollTop : document.body.scrollTop; 
            alert("网页滚动的水平距离：" + scrollLeft_distance + "-" + "网页滚动的垂直距离：" + scrollTop_distance);
 
 
 
        }
        );
    </script>
    <style type="text/css">
        body
        {
        
            padding: 0px; 
        }
    </style>
</head>
<body id="fm">
    <div style="height: 3000px; margin: 0px; padding: 0px; background-color: Red">
        <ul style="background-color: Black; height: 900px; color: White" id="div">
            <li>sdfsdfsdfds </li>
        </ul>
    </div>
    <div id="se"></div>
</body>
</html>

代码运行效果如下

六、页面元素的实际高度

获取页面元素的实际宽度和高度代码如下所示：


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery-3.6.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(
        function () {
            
            //获取网页元素的实际高度和宽度
 
            var em_x = document.getElementById("se").offsetWidth;
            var em_y = document.getElementById("se").offsetHeight;
            alert("网页元素的宽度：" + em_x + "-" + "网页元素的高度：" + em_y);
        }
        );
    </script>
    <style type="text/css">
        body
        {
        
            padding: 0px; 
        }
    </style>
</head>
<body id="fm">
    <div style="height: 3000px; margin: 0px; padding: 0px; background-color: Red">
        <ul style="background-color: Black; height: 900px; color: White" id="div">
            <li>sdfsdfsdfds </li>
        </ul>
    </div>
    <div id="se" style="width:100px; height:300px ; background-color:Lime">11</div>
</body>
</html>

获取页面元素的实际宽度和高度运行效果如下

相关阅读:
【线性代数】第五章-线性方程组
 Android全新UI框架之Compose状态管理与重组
 Docker 容器生命周期：创建、启动、暂停与停止----从创建到停止多角度分析
 Python 协程详解
 mac安装+配置python3环境
 接口测试常用技能：Jmeter操作数据库
 C#的LINQ to XML 类中使用最多的三个类：XElement、XAttribute 和 XDocument
Android12 OTA编译差分包报错问题
 系统架构设计师 2023年综合知识
 406. 根据身高重建队列
原文地址：https://blog.csdn.net/bbj123456/article/details/125461112