↗☻【位置 / 尺寸】

event.clientX

相对文档的水平座标
event.clientY
相对文档的垂直座标

offsetWidth
获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度
offsetHeight
获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
#clientHeight+滚动条+边框

offsetLeft
获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop
获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

event.offsetX
相对容器的水平坐标
event.offsetY
相对容器的垂直坐标

 

 

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="utf-8" />

    <title></title>

    <style type="text/css">

        * {

            margin: 0;

            padding: 0;

        }

        p {

            width: 111.111111%;

            font-size: 30px;

        }

        #box1 {

            float: left;

            width: 500px;

            height: 500px;

            overflow: auto;

        }

        #box2 {

            float: left;

            width: 500px;

            height: 500px;

            overflow: auto;

            padding: 7px;

            border: 7px solid #000;

        }

    </style>

</head>

<body>

    <div id="box1">

        <p>如果丘处机没有路过牛家村,中国将是最发达国家如果丘处机没有路过牛家村,中国将是最发达国家</p>

        <p>如果丘处机没有路过牛家村,中国将是最发达国家如果丘处机没有路过牛家村,中国将是最发达国家</p>

        <p>如果丘处机没有路过牛家村,中国将是最发达国家如果丘处机没有路过牛家村,中国将是最发达国家</p>

        <p>如果丘处机没有路过牛家村,中国将是最发达国家如果丘处机没有路过牛家村,中国将是最发达国家</p>

        <p>如果丘处机没有路过牛家村,中国将是最发达国家如果丘处机没有路过牛家村,中国将是最发达国家</p>

        <p>如果丘处机没有路过牛家村,中国将是最发达国家如果丘处机没有路过牛家村,中国将是最发达国家</p>

        <p>如果丘处机没有路过牛家村,中国将是最发达国家如果丘处机没有路过牛家村,中国将是最发达国家</p>

        <p>如果丘处机没有路过牛家村,中国将是最发达国家如果丘处机没有路过牛家村,中国将是最发达国家</p>

        <p>如果丘处机没有路过牛家村,中国将是最发达国家如果丘处机没有路过牛家村,中国将是最发达国家</p>

        <p>如果丘处机没有路过牛家村,中国将是最发达国家如果丘处机没有路过牛家村,中国将是最发达国家</p>

    </div>

    <div id="box2">

        <p>如果丘处机没有路过牛家村,中国将是最发达国家如果丘处机没有路过牛家村,中国将是最发达国家</p>

        <p>如果丘处机没有路过牛家村,中国将是最发达国家如果丘处机没有路过牛家村,中国将是最发达国家</p>

    </div>

    <script>

        var box1 = document.getElementById('box1');

        var box2 = document.getElementById('box2');



        alert('clientWidth:' + box1.clientWidth +

            ' clientHeight:' + box1.clientHeight +

            ' scrollWidth:' + box1.scrollWidth +

            ' scrollHeight:' + box1.scrollHeight +

            ' offsetWidth:' + box1.offsetWidth +

            ' offsetHeight:' + box1.offsetHeight);



        alert('clientWidth:' + box2.clientWidth +

            ' clientHeight:' + box2.clientHeight +

            ' scrollWidth:' + box2.scrollWidth +

            ' scrollHeight:' + box2.scrollHeight +

            ' offsetWidth:' + box2.offsetWidth +

            ' offsetHeight:' + box2.offsetHeight);

    </script>

</body>

</html>

再谈 document.documentElement 与 document.body 的 scrollWidth、offsetWidth、clientWidth
http://www.cftea.com/c/2010/10/ZROIXWE5YCZ6WQDJ.asp

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="utf-8" />

    <title></title>

    <style type="text/css">

        * {

            margin: 0;

            padding: 0;

        }

        #box1 {

            width: 1900px;

            height: 1900px;

        }

        #box2 {

            width: 100px;

            height: 100px;

        }

    </style>

</head>

<body>

    <div id="box3"></div>

    <div id="box2"></div>

    <div id="box1"></div>

    <script>

        document.getElementById('box3').innerHTML = 'document.documentElement.scrollWidth:' + document.documentElement.scrollWidth +

            '<br> document.body.scrollWidth:' + document.body.scrollWidth +

            '<br> document.documentElement.scrollHeight:' + document.documentElement.scrollHeight +

            '<br> document.body.scrollHeight:' + document.body.scrollHeight +

            '<br><br> document.documentElement.offsetWidth:' + document.documentElement.offsetWidth +

            '<br> document.body.offsetWidth:' + document.body.offsetWidth +

            '<br> document.documentElement.offsetHeight:' + document.documentElement.offsetHeight +

            '<br> document.body.offsetHeight:' + document.body.offsetHeight +

            '<br><br> document.documentElement.clientWidth:' + document.documentElement.clientWidth +

            '<br> document.body.clientWidth:' + document.body.clientWidth +

            '<br> document.documentElement.clientHeight:' + document.documentElement.clientHeight +

            '<br> document.body.clientHeight:' + document.body.clientHeight;

    </script>

</body>

</html>

 

你可能感兴趣的:(尺寸)