GitHub 博客园 Nanakon

↗☻【位置 / 尺寸】

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>

 

posted on 2013-06-27 16:28  jzm17173  阅读(261)  评论(0)  编辑  收藏  举报

导航

轻音