offset, client, scroll

最新推荐文章于 2021-12-28 16:50:24 发布

zh__quan

最新推荐文章于 2021-12-28 16:50:24 发布

阅读量147

点赞数

分类专栏： webapi

本文链接：https://blog.csdn.net/zh__quan/article/details/97628746

版权

webapi 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

offset

scroll

client

offset

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #box{
            width: 200px;
            height: 150px;
            background-color: red;
            padding: 10px;
            border: 5px solid #ddd;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div id="box" style="width: 100px;height: 100px;"></div>

<script>
    var box = document.getElementById("box");
    // offsetHeight  = 内容 + 内边距 + 边框
    console.log( box.offsetWidth, box.offsetHeight);  // 130 130
    console.log( box.style.width, box.style.height);  // 100px 100px
    box.style.width = 500 + 'px';
    box.offsetWidth = 100 + 'px';
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="yeye" style="position: relative;">
        <div id="father" >
            <div id="son"></div>
        </div>
    </div>

<script>
    var son = document.getElementById("son");
    // offsetLeft 距离offsetParent的横向偏移
    console.log(son.offsetLeft)
    // offsetParent   获取距离当前元素最近的定位父元素，如果没有定位父元素此时是body
    console.log(son.offsetParent);
    console.log(son.parentNode);
</script>
</body>
</html>

scroll

网页正文全文宽： document.body.scrollWidth;

网页正文全文高： document.body.scrollHeight;

网页被卷去的高： document.body.scrollTop;

网页被卷去的左： document.body.scrollLeft;

处理scroll家族浏览器适配问题

ie9+ 和最新浏览器

    window.pageXOffset; （scrollLeft）

    window.pageYOffset; （scrollTop）

Firefox浏览器和其他浏览器

document.documentElement.scrollTop;
Chrome浏览器和没有声明 DTD <DOCTYPE >

document.body.scrollTop;
兼容写法 var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0; var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;

client

1.1 clientWidth和clientHeight

网页可见区域宽： document.body.clientWidth;
网页可见区域高： document.body.clientHeight;

1.2 clientLeft和clientTop

返回的是元素边框的borderWidth，
如果不指定一个边框或者不定位改元素，其值就为0

offset、client和scroll的区别分析

left和top分析：
- clientLeft: 左边边框的宽度；clientTop: 上边边框的宽度
- offsetLeft: 当前元素距离有定位的父盒子左边的距离；offsetTop: 当前元素距离有定位的父盒子上边的距离
- scrollLeft: 左边滚动的长度; scrollTop: 上边滚动的长度;

width和height分析
- clientWidth\/Height: 内容 + 内边距
- offsetWidth\/Height: 内容 + 内边距 + 边框
- scrollWidth\/Height: 滚动内容的宽度和高度

/**兼容性问题
 * 获取滚动的头部距离和左边距离
 * scroll().top scroll().left
 * @returns {*}
 */
function scroll() {
    if(window.pageYOffset !== null){
        return {
            top: window.pageYOffset,
            left: window.pageXOffset
        }
    }else if(document.compatMode === "CSS1Compat"){ // W3C
        return {
            top: document.documentElement.scrollTop,
            left: document.documentElement.scrollLeft
        }
    }

    return {
        top: document.body.scrollTop,
        left: document.body.scrollLeft
    }
}


function $(id) {
    return typeof id === "string" ? document.getElementById(id) : null;
}

/**
 * 获取屏幕的宽度和高度
 * @returns {*}
 */
function client() {
    if(window.innerWidth){ // ie9+ 最新的浏览器
        return {
            width: window.innerWidth,
            height: window.innerHeight
        }
    }else if(document.compatMode === "CSS1Compat"){ // W3C
        return {
            width: document.documentElement.clientWidth,
            height: document.documentElement.clientHeight
        }
    }

    return {
        width: document.body.clientWidth,
        height: document.body.clientHeight
    }
}

zh__quan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
offset, client, scroll

目录offsetscrollclientoffset<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> #box{ ...
复制链接

扫一扫