BOM屏幕宽高

最新推荐文章于 2022-07-26 18:45:22 发布

小海鸥

最新推荐文章于 2022-07-26 18:45:22 发布

阅读量324

点赞数

文章标签： js

本文链接：https://blog.csdn.net/weixin_68485297/article/details/124570713

版权

一、调整窗口大小属性

window.onresize 是调整窗口大小加载事件，当触发时就调用的处理<!DOCTYPE html>

浏览器可视窗口的尺寸

1、内部的宽高

（1）散装

属性（兼容性）

innerWidth 当前屏幕的宽度

innerHeight 当前屏幕高

clientWidth 当前屏幕的宽度

clientHeight 当前屏幕高

（2）浏览器窗口封装

二、滚动条移动尺寸

1、散装

高度

document.documentElement.scrollTop

document.body.scrollTop

滚动条向下滚动的像素

宽度

document.documentElement.scrollLeft

document.body.scrollLeft

滚动条向右滚动的像素

<script>

        console.log(document.documentElement.scrollTop,document.body.scrollTop);
        console.log(document.documentElement.scrollLeft,document.body.scrollLeft);
</script>

2、滚动条移动尺寸封装

<body>
    <div></div>
    <script>
        function scoll(){
            return{
                top:document.documentElement.scrollTop||document.body.scrollTop,
                left:document.documentElement.scrollLeft||document.body.scrollLeft,
            }
        }
        console.log( scoll().top);
        console.log( scoll().left);
    </script>
</body>

小海鸥

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
BOM屏幕宽高

一、调整窗口大小属性window.onresize 是调整窗口大小加载事件，当触发时就调用的处理<!DOCTYPE html>浏览器可视窗口的尺寸1、内部的宽高（1）散装属性（兼容性）innerWidth 当前屏幕的宽度innerHeight 当前屏幕高clientWidth 当前屏幕的宽度clientHeight 当前屏幕高（2）浏览器窗口封装二、滚动条移动尺寸1、散装高度 document.documentEl...
复制链接

扫一扫