完美理解csss中offsetLeft，offsetWidth，scrollLeft区别。

最新推荐文章于 2023-12-22 16:28:01 发布

wending-Y

最新推荐文章于 2023-12-22 16:28:01 发布

阅读量1.6k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/qq_22222499/article/details/52863951

版权

前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

本节内容旨在理解上述词的区别。
先来代码再分析

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body{
            margin-left: 30px;
        }
        .head{
            width: 400px;
            height: 300px;
            background-color: #4ae75e;
            padding: 30px;
            border: 10px solid red;
            margin-bottom: 30px;
        }
        #but{
            position: fixed;
            left:450px;
            top: 630px;
        }
        #cdc{
            position: fixed;
            left: 60px;
            top: 500px;
        }
        #he{
            width: 400px;
            height:100px;
            background-color: #4ae75e;
            overflow: auto;
            white-space: nowrap;
        }
    </style>
</head>
<body>
<div class="head" id="head">

</div>
<div id="he" class="he">
    CodePlayer 专注于编程开发技术分享  CodePlayer 专注于编程开发技术分享 CodePlayer 专注于编程开发技术分享
    CodePlayer 专注于编程开发技术分享  CodePlayer 专注于编程开发技术分享 CodePlayer 专注于编程开发技术分享
</div>

<div>
    <h1>head.offsetLeft:<span id="ab"></span><br></h1>
    <h1>head.offsetWidth:<span id="bc"></span><br></h1>
    <h1>he.scrollLeft:<span id="cd"></span></h1>
    <input type="button" value="点击" id="but">
</div>
<script>
    var a=document.getElementById("head");
    var ab=document.getElementById("ab");
    var bc=document.getElementById("bc");
    var cd=document.getElementById("cd");
    var he=document.getElementById("he");
    ab.innerHTML=a.offsetLeft;
    bc.innerHTML=a.offsetWidth;
    but.onclick=function () {
        cd.innerHTML = he.scrollLeft;
    }
</script>
</body>
</html>

效果展示
结论
1.offsetLeft=距离浏览器左边的宽度
2.offsetWidth=2*padding+width+border*2;
3.scrollLeft=水平拖动条隐藏的内容长度。

wending-Y

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
完美理解csss中offsetLeft，offsetWidth，scrollLeft区别。

本节内容旨在理解上述词的区别。先来代码再分析<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> body{ margin-left: 30px; }
复制链接

扫一扫