jQuery基础 (五) - 位置尺寸篇 -

第一章、元素的尺寸

jQuery 提供多个处理尺寸的重要方法：
width()、height()
innerWidth()、innerHeight()
outerWidth()、outerHeight()

看例子超好理解
width()和innerWidth()和outerWidth()

    <style media="screen">
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
            padding: 10px;
            margin: 10px;
            border: 10px solid #333;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
    <script type="text/javascript">
        alert($('.box').width());    //  width
        alert($('.box').innerWidth());    //  width + padding
        alert($('.box').outerWidth());    //  width + padding + border
        alert($('.box').outerWidth(true));    //  width + padding + border + margin
    </script>

可视区尺寸、页面尺寸

    $(window).height()     //  窗口可视区高度
    $(document).height()   //  页面总体高度

滚动条距离
scrollTop()、scrollLeft()滚动条相对于其顶部的偏移。

    $(document).on('click', function() {
        $(document).scrollTop(300)   //  点击页面，下滑到300px距离
    })

image.png

第二章、元素的位置

offset() 被选元素相对于文档的偏移坐标
该方法包含两个整型属性：offset().top 和offset().left

position() 被选元素相对于父元素的偏移坐标
该方法包含两个整型属性：position().top 和 position().left。

offsetParent()用于：懒加即是图片滚动加载(花瓣的瀑布流)

1.4 offset() 和 position()

找个好点的例子

    <style media="screen">
        * {
            margin: 0; padding: 0;
        }
        #div1 {
            width: 200px;
            height: 200px;
            background-color: red;
            margin: 20px;
            overflow: hidden;
        }
        #div2 {
            width: 100px;
            height: 100px;
            background-color: yellow;
            margin: 30px;
        }
    </style>
</head>
<body>
    <div id="div1">
        <div id="div2"></div>
    </div>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
    <script type="text/javascript">
        alert($('#div2').offset().top);  // div2 方块到屏幕的高距离   50
        alert($('#div2').offset().left);  // div2 方块到屏幕的左距离   50
        alert($('#div2').position().left);  // 到有定位父级的left的值,把当前元素转化成带定位的形式    20
    </script>

屏幕快照 2018-03-12 下午5.16.45.png

最后编辑于：2018.08.24 09:56:58

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

jQuery基础 (五) - 位置尺寸篇 -