17/7/26 获取浏览器网页窗口可视区域大小等

最新推荐文章于 2022-07-05 13:54:55 发布

Jasper-Chou

最新推荐文章于 2022-07-05 13:54:55 发布

阅读量379

点赞数

分类专栏： 7.26 9.18-9.22 scrollWidth offsetWidth offsetTopoffsetLeftscrollTopscrollLeft 文章标签： 7.26 javascript

本文链接：https://blog.csdn.net/zhouying8023/article/details/76141603

版权

7.26 9.18-9.22 scrollWidth offsetWidth offsetTopoffsetLeftscrollTopscrollLeft 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

浏览器窗口可视区域大小

7.26

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<script type="text/javascript">
var w= document.documentElement.clientWidth
      || document.body.clientWidth;
var h= document.documentElement.clientHeight
      || document.body.clientHeight;
      document.write(w+ ","+h);
      //解决兼容性问题

var w=document.documentElement.scrollWidth
   || document.body.scrollWidth;
var h=document.documentElement.scrollHeight
   || document.body.scrollHeight;//网页尺寸scrollHeight 是网页内容实际高度，可以小于 clientHeight。//offsetHeight和offsetWidth，获取网页内容高度和宽度(包括滚动条等边线，会随窗口的显示大小改变)。
var w= document.documentElement.offsetWidth
    || document.body.offsetWidth;
var h= document.documentElement.offsetHeight
    || document.body.offsetHeight;

</script>
</body>
</html>

7.26

网页卷去的距离与偏移量

<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
    function req(){
          var div = document.getElementById("div1");
          document.getElementById("li1").innerHTML = (div.offsetTop)+"px";//div1距离屏幕顶部的距离
          document.getElementById("li2").innerHTML = (div.offsetLeft)+"px";//div1距离屏幕左部的距离
          document.getElementById("li3").innerHTML = (div.scrollTop)+"px";//div1纵向滚动条滚动的距离
          document.getElementById("li4").innerHTML = (div.scrollLeft)+"px";//div1横向滚动条滚动的距离
     }
</script>
</head>
<body style="border:10px solid #ccc;padding:0px 0px;margin:5px 10px">
    <div style="width:60%;border-right:1px dashed red;float:left;">
        <div style="float:left; border:yellow solid;">
            <div id="div1" style="border:5px blue solid;height:300px;width:200px;overflow:auto">

                <div style="height:500px;width:400px">请调整横竖滚动条后，点击按钮后查看offsetTop、offsetLeft、scrollTop、scrollLeft值。</div>
            </div>
            <input type="button" value="点击我!" οnclick="req()" style="border: 1px solid purple;height: 25px;"/>
        </div>

    </div>
    <div style="width:30%;float:left; border: red solid;">
        <ul style="list-style-type: none; line-height:30px;">结果：
            <li>offsetTop : <span id="li1"></span></li>
            <li>offsetLeft : <span id="li2"></span></li>
            <li> scrollTop : <span id="li3"></span></li>
            <li>scrollLeft : <span id="li4"></span></li>
        </ul>

    </div>
    <div style="clear:both;"></div>
</body>
</html>

编程挑战别忘了：

Jasper-Chou

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
17/7/26 获取浏览器网页窗口可视区域大小等

浏览器窗口可视区域大小7.26 var w= document.documentElement.clientWidth || document.body.clientWidth;var h= document.documentElement.clientHeight || document.body.clientHeig
复制链接

扫一扫