您的位置：首页 > Web前端
[前端] clientWidth offsetWidth scrollWidth scrollTop scrollLeft 与 clientX pageX offsetX 解析

2015-04-15 10:34 483 查看
<!DOCTYPE HTML>
<html lang="zh-CN">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
        <title>test</title>
        <script src="jquery.min.js"></script>
    </head>
    <body>
        <style>
            body {
                width: 1200px;
            }
            #box {
                width: 160px;
                height: 240px;
                padding: 10px;
                margin: 10px;
                border: 2px solid #ccc;
                overflow-y: scroll;
                overflow-x: none;
            }
        </style>

        <div id="box">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni deserunt iste placeat suscipit itaque molestiae natus accusantium, optio qui necessitatibus, eaque distinctio odio adipisci autem quaerat blanditiis. Corporis pariatur, recusandae.
        </div>
        <h1>hello world !</h1>
        <h1>hello world !</h1>
        <h1>hello world !</h1>
        <h1>hello world !</h1>
        <h1>hello world !</h1>
        <h1>hello world !</h1>
        <h1>hello world !</h1>
        <h1>hello world !</h1>
        <h1>hello world !</h1>
        <h1>hello world !</h1>
        <h1>hello world !</h1>
        <h1>hello world !</h1>
        <h1>hello world !</h1>
        <h1>hello world !</h1>
        <h1>hello world !</h1>
        <h1>hello world !</h1>
        <h1>hello world !</h1>
        <h1>hello world !</h1>
        <h1>hello world !</h1>
        <h1>hello world !</h1>
        <h1>hello world !</h1>
        <h1>hello world !</h1>
        
        <script>
            /*
            * scrollHeight(滚动高度)  offsetHeight(完整高度包括边框和补白)  clientHeight(可见区内容高度) 可以按英文意思去理解
            * document.documentElement.scrollWidth
            * document.documentElement.offsetWidth
            * document.documentElement.clientWidth
            * document.body.scrollHeight
            * document.body.offsetHeight
            * document.body.clientHeight
            * 上面两种写法是一样的，之所以这样写是考虑到兼容性 看页面有没有DTD 文件类型定义（document type definition）
            * 如果有则使用document.documentElement.offsetWidth  没有 就使用 document.body.offsetWidth
            *
            * body 是DOM对象里的body子节点  即<body>标签
            * documentElement 是整个节点树的根节点root，即<html>标签
            *
            * DOM把层次中的每一个对象都称之为节点，就是一个层次结构，你可以理解为一个树形结构，就像我们的目录一样，一个根目录，根目录下有子目录，子目录下还有子目录。

             以HTML超文本标记语言为例：整个文档的一个根就是,在DOM中可以使用document.documentElement来访问它，它就是整个节点树的根节点。
             而body是子节点，要访问到body标签，在脚本中应该写：document.body。

            * */

            console.log(document.body.clientHeight);  // 获取用户可见区域的高度
            console.log(document.body.clientWidth);   // 获取用户可见区域的宽度
            console.log(document.body.scrollHeight);  // 获取整个文档内容的高度
            console.log(document.body.scrollWidth);   // 获取整个文档内容的宽度  在没有获取body宽度的时候，同 document.body.clientHeight的宽度一样
            console.log(document.body.offsetWidth);   // 获取body的宽度  包括边框和补白 不包括滚动条宽度
            console.log(document.body.offsetHeight);  // 获取body的高度  包括边框和补白 不包括滚动条高度

            console.log(document.getElementsByTagName('div')[0].offsetLeft);  // 获取div距页面左侧的宽度  同jquery的 $('div').offset().left 一样
            console.log(document.getElementsByTagName('div')[0].offsetTop);   // 获取div距页面左侧的高度  同jquery的 $('div').offset().top 一样
            console.log(document.getElementsByTagName('div')[0].clientWidth);  // 获取div的可见内容宽度 不包括边框和补白
            console.log(document.getElementsByTagName('div')[0].clientHeight);  // 获取div的可见内容高度 不包括边框和补白
            console.log(document.getElementsByTagName('div')[0].offsetWidth);  // 获取整个div的宽度 包括边框和补白
            console.log(document.getElementsByTagName('div')[0].offsetHeight);  // 获取整个div的高度 包括边框和补白
            console.log(document.getElementsByTagName('div')[0].scrollWidth);   // 获取整个div内容的宽度  不包括边框和补白
            console.log(document.getElementsByTagName('div')[0].scrollHeight);   // 获取整个div内容的高度  不包括边框和补白
            console.log(document.getElementsByTagName('div')[0].clientLeft);     // 获取div边框的宽度
            console.log(document.getElementsByTagName('div')[0].clientTop);      // 获取div边框的宽度

            // 定义包括滚运条内容的整个宽度
            var fScrollWidth = Math.max(document.documentElement.scrollWidth, document.body.scrollWidth);

            // 定义包括滚运条内容的整个宽度
            var fScrollHeight = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight);

            // 滚上去的部分
            var iScrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;

            // 滚动到左侧的部分
            var iScrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;

            // clientX  pageX offsetX
            window.onmousemove = function(e) {
                e = e || window.event;

                // clientX clientY 鼠标相对 于浏览器窗口可视区域的X, Y坐标（窗口坐标），可视区域不包括工具栏和滚动香槟酒。IE事件和标准事件都定义了这2个属性
                // console.log(e.clientX+','+ e.clientY);

                // 鼠标相对于浏览器窗口可视区域的X,Y坐标，可视区域不包括工具栏和滚动条，IE事件和标准事件都定义了这2个属性
                // console.log(e.pageX+','+ e.pageY);

                // pageX, pageY类似于e.clientX e.clientY 但它们使用的是文档坐标而非窗口坐标。 这2个属性不是标准属性，但得到了广泛支持。IE事件中没有这2个属性
                // console.log(e.pageX+','+ e.pageY);

                // offsetX  offsetY 鼠标相对于事件源元素（srcElement）的X,Y坐标，只有IE事件有这2个属性，标准事件没有对应的属性
                console.log(e.offsetX+','+ e.offsetY);
            }
        </script>
    </body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航