为了账号安全,请及时绑定邮箱和手机立即绑定

对js中的各种宽高理解

标签:
JavaScript
<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>各种宽高的理解</title>
        <style type="text/css">
            * {
                padding: 0;
                margin: 0
            }

            #test {
                width: 100px;
                height: 100px;
                padding: 10px;
                margin: 10px;
                border: 1px solid blue;
                overflow: auto;
            }
        </style>
    </head>

    <body>
        <div id="test">
            <div style="height: 200px;"></div>
        </div>
        <script type="text/javascript">
            //以下说明只在谷歌浏览器有效,其他浏览器略有差别
            var test = document.getElementById("test");
            console.log(test.clientHeight + '-' + test.clientWidth); //120---103
            console.log(test.clientLeft + '-' + test.clientTop); //1---1
            //clientHeight,clientWidth指的是元素可视部分的宽高,即等于padding+content;
            //如果有滚条,需要减去滚动条的宽高。
            //clientLeft,clientTop返回的是元素周围边框的厚度。
            console.log("-------------------------");
            console.log(test.offsetHeight + '-' + test.offsetWidth); //122---122
            console.log(test.offsetLeft + '-' + test.offsetTop); //10---10
            console.log(test.offsetParent);
            //offsetHeight,offsetWidth. 等于padding+content+border;
            //offsetLeft,offsetTop为相对于offsetParent的偏移量
            //他们与是否有滚动条无关
            console.log("-------------------------");
            console.log(test.scrollHeight + '-' + test.scrollWidth); //220---103
            console.log(test.scrollLeft + '-' + test.scrollTop); //0---0
            //scrollHeight,scrollWidth指的是元素实际的宽高,即等于padding+content;
            //如果有滚条,需要减去滚动条的宽高。
            //scrollLeft,scrollTop指的是元素被卷起的宽高,可读可写
            test.onclick = function(event) {
                    var e = event || window.event;
                    console.log("event的五种坐标----");
                    console.log(event.clientX + 'client坐标' + event.clientY);
                    console.log(event.offsetX + 'offset坐标' + event.offsetY);
                    console.log(event.pageX + 'page坐标' + event.pageY);
                    console.log(event.screenX + 'screen坐标' + event.screenY);
                    console.log(event.x + '坐标' + event.y);
                }
                //event.clientX,event.clientY---相对于浏览器可视区左上角的坐标
                //event.offsetX,event.offsetY---相对于事件源左上角的坐标
                //event.pageX,event.pageY---相对于整个网页左上角的坐标
                //event.screenX,event.screenY---相对于设备屏幕左上角的坐标
                //event.x,event.y---与client坐标相同
            console.log(window.innerHeight + '-' + window.innerWidth);
            //窗口的宽高,不包括菜单栏
            console.log(window.outerHeight + '-' + window.outerWidth);
            //整个窗口的宽高,包括窗口的一切
            console.log(window.screenLeft + '-' + window.screenTop);
            //窗口距离屏幕左边和上边的距离
            console.log(window.screen.availWidth + '-' + window.screen.availHeight);
            //屏幕的宽高
            console.log(window.screen.availLeft + '-' + window.screen.availTop); //为0
        </script>
    </body>

</html>
点击查看更多内容
1人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消