JavaScript基础 client offset scroll window.screen.width

clientWidth 得到对象的宽度
内容+左右padding

clientHeight 得到对象的高度
内容+上下padding

只有读取不能设置

<style>
div{
        width: 100px;
        height: 120px;
        padding: 5px;
        margin: 10px;
        border: 3px solid red;
        background: #ddd;
    }
</style>
</head>
<body>
     <div>你昌好的是归了的是进</div>
    <script type="text/javascript">
        var oDiv = document.getElementsByTagName( 'div' )[0];
            console.log( 'width:'+oDiv.clientWidth );//width+左右padding
            console.log( 'height:'+oDiv.clientHeight );//height+左右padding
    </script>
image.png

获取浏览器窗口的宽高

<style>
.wrap{
        height: 2500px;
    }
</style>
</head>
<body>
    <div class="wrap"></div>
    <script type="text/javascript">
        console.log( document.body.clientWidth );
        console.log( document.body.clientHeight );
    </script>
</body>
image.png

获取的是body的所有高度;滚动条下的也获取到

获取可见区域

<style>
.wrap{
        height: 2500px;
    }
</style>
</head>
<body>
    <div class="wrap"></div>
    <script type="text/javascript">
        console.log( document.documentElement.clientWidth );
        console.log( document.documentElement.clientHeight );
    </script>
</body>
image.png

offsetWidth 得到对象的宽度
内容+左右padding + 左右border

<style>
div{
        width: 100px;
        height: 120px;
        padding: 5px;
        margin: 10px;
        border: 3px solid red;
        background: #ddd;
    }
</style>
</head>
<body>
     <div>你昌好的是归了的是进</div>
    <script type="text/javascript">
        var oDiv = document.getElementsByTagName( 'div' )[0];
            console.log( 'width:'+oDiv.offsetWidth );//width+左右padding
            console.log( 'height:'+oDiv.offsetHeight );//height+左右padding
    </script>
image.png

offsetHeight 得到对象的高度
内容+上下padding + 上下border

offsetTop获取对象到 定位父级 的Top值
offsetLeft 获取对象到 定位父级 的Left值

<style>
h4{
        position: relative;
        width: 500px;
        height: 500px;
        margin: 50px auto;
        border: 1px solid green;
    }
    div{
        position: absolute;
        top: 10px;
        left: 15px;
        width: 100px;
        height: 120px;
        padding: 5px;
        border: 3px solid red;
        background: #ddd;
    }
</style>
</head>
<body>
    <h4>
        <div>jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj你昌好的是归了的是进你昌好的是归了的是进你昌好的是归了的是进你昌好的是归了的是进你昌好的是归了的是进你昌好的是归了的是进</div>
    </h4>
     
    <script type="text/javascript">
        var oDiv = document.getElementsByTagName( 'div' )[0];
            console.log( 'top:'+oDiv.offsetTop );
            console.log( 'left:'+oDiv.offsetLeft );
    </script>
image.png

如果是设置bottom跟right的时候

    <style>
    h4{
        position: relative;
        width: 500px;
        height: 500px;
        margin: 50px auto;
        border: 1px solid green;
    }
    div{
        position: absolute;
        bottom: 10px;
        right: 15px;
        width: 100px;
        height: 120px;
        padding: 5px;
        border: 3px solid red;
        background: #ddd;
    }
</style>
</head>
<body>
    <h4>
        <div>jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj你昌好的是归了的是进你昌好的是归了的是进你昌好的是归了的是进你昌好的是归了的是进你昌好的是归了的是进你昌好的是归了的是进</div>
    </h4>
     
    <script type="text/javascript">
        var oDiv = document.getElementsByTagName( 'div' )[0];
            console.log( 'top:'+oDiv.offsetTop );
            console.log( 'left:'+oDiv.offsetLeft );
    </script>
image.png

scrollWidth 得到内容的宽度

scrollHeight 得到内容的高度

只有读取不能设置

<style>
div{
        width: 100px;
        height: 120px;
        padding: 5px;
        margin: 10px;
        border: 3px solid red;
        background: #ddd;
    }
</style>
</head>
<body>
     <div>jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj你昌好的是归了的是进你昌好的是归了的是进你昌好的是归了的是进你昌好的是归了的是进你昌好的是归了的是进你昌好的是归了的是进</div>
    <script type="text/javascript">
        var oDiv = document.getElementsByTagName( 'div' )[0];
            console.log( 'width:'+oDiv.scrollWidth );
            console.log( 'height:'+oDiv.scrollHeight );
    </script>

蓝色为padding 右边跟下边的内容已经超出时不用算进去；

加overflow:hidden的情况

<style>
    div{
        overflow: hidden;
        width: 100px;
        height: 120px;
        padding: 5px;
        margin: 10px;
        border: 3px solid red;
        background: #ddd;
    }
</style>
</head>
<body>
     <div>jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj你昌好的是归了的是进你昌好的是归了的是进你昌好的是归了的是进你昌好的是归了的是进你昌好的是归了的是进你昌好的是归了的是进</div>
    <script type="text/javascript">
        var oDiv = document.getElementsByTagName( 'div' )[0];
            console.log( 'width:'+oDiv.scrollWidth );
            console.log( 'height:'+oDiv.scrollHeight );
    </script>
image.png

注意：要加上左右 上下的padding

scrollTop 滚动的高度 //有兼容性问题
onscroll 滚动事件 滚动条滚动的时候触发的

<style>
.wrap{
        height: 2500px;
    }
</style>
</head>
<body>
    <div class="wrap"></div>
    <script type="text/javascript">
        var oDiv = document.getElementById('box');
        window.onscroll = function (){
                  //scrollTop兼容写法
            var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
            console.log( scrollTop );
        }
    </script>
</body>
image.png

div盒子滚动

<style type="text/css">
    /*清除样式*/
    *{margin: 0;padding: 0;}
    ul li{list-style-type: none;}
    a{text-decoration: none; color: inherit;}
    /*---------------------------------------------------*/

    #box{
        overflow: scroll;
        display: block;
        width: 100px;
        height: 100px;
        border: 1px solid red;
    }
</style>
</head>
<body>
    <div id="box">你好地是进是进进进进进耠十分钟刀直年胆时是进百尖是进在是进而进而进而地是是你好地是进是进进进进进耠十分钟刀直年胆时是进百尖是进在是进而进而进而地是是</div>
    <script type="text/javascript">
        var oBox = document.getElementById( 'box' );
        oBox.onscroll = function (){  //onscroll窗口滚动事件
            console.log(  oBox.scrollTop );
        }   
    </script>
</body>
image.png

获取显示器的宽高
window.screen.width获取显示器分辨率宽度
window.screen.height获取显示器分辨率高度

    <script type="text/javascript">
        console.log( window.screen.width );
        console.log( window.screen.height );
    </script>
image.png
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 13,792评论 1赞 92
  • javascript获取浏览器宽高
    网页可见区域宽：document.body.clientWidth网页可见区域高：document.body.cl...
    LuckyS007阅读 667评论 0赞 0
  • JavaScript 知识点
    JS基础 页面由三部分组成：html：超文本标记语言，负责页面结构css：层叠样式表，负责页面样式js：轻量级的脚...
    小贤笔记阅读 621评论 0赞 5
  • JS 各种宽高的理解
    Window和document对象的区别 window对象window对象表示浏览器中打开的窗口window对象是...
    FConfidence阅读 2,243评论 0赞 5
  • 正面管教026——积极暂停
    原文片段1 《全脑教养法》P44 正如你以为的那样，当上层大脑和下层大脑整合运作的时候，大脑运转最良好。因此父母...
    Fly_Catkin阅读 399评论 0赞 0