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

计算机软件大师

已于 2022-07-04 10:51:43 修改

阅读量1.3k

点赞数

分类专栏： css jQuery 文章标签： java 前端

于 2022-06-27 16:54:13 首次发布

本文链接：https://blog.csdn.net/bbj123456/article/details/125461112

版权

css 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

jQuery

3 篇文章 0 订阅

订阅专栏

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

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

<!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>

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