获取标签元素尺寸获取标签元素的位置获取浏览器上卷高度

最新推荐文章于 2022-10-31 13:54:02 发布

Allen·赵

最新推荐文章于 2022-10-31 13:54:02 发布

阅读量361

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/zqlbanzhuan/article/details/108936651

版权

jQuery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

获取标签元素尺寸

   <style>
    *{
        margin: 0;
        padding: 0;
    }

    div{
        width: 300px;
        height: 300px;
        padding: 10px;
        border: 20px solid #000;
        margin: 30px;
        background: pink;

        /* 内减模式 */
        box-sizing: border-box;
    }
</style>
</head>
<body>

<div></div>

<script src="./jquery.min.js"></script>
<script>
    // 获取标签的占位
    //     width 和 height
    //     padding
    //     border
    //     margin

    // 3个方法,4种使用方式

    // width()  和 height() 
    //    获取 标签 的 内容
    //    正常情况下 是 width 和 height
    //    如果有 内减属性  就是  width / height - padding - border

    // console.log( $('div').width() ,  $('div').height() );


    // innerWidth() 和 innerHeight()
    //    获取 标签 的 内容 + padding 
    //    正常情况下 是 width / height + padding
    //    如果有 内减属性  就是  width / height - border

    // console.log( $('div').innerWidth() ,  $('div').innerHeight() );


    // outerWidth() 和 outerHeight()
    //    获取 标签 的 内容 + padding + border
    //    正常情况下 是 width / height + padding + border
    //    有 内减属性  就是  width / height 
    // console.log( $('div').outerWidth() ,  $('div').outerHeight() );


    // outWidth(true) 和 outHeight(true)
    //    获取 标签 的 内容 + padding + border + margin
    //    有 内减属性  就是  width / height + margin
    //    正常情况下 是 width / height + padding + border + margin

    console.log( $('div').outerWidth(true) ,  $('div').outerHeight(true) );



</script>

获取标签元素的位置

<style>
    *{
        margin: 0;
        padding:0;
    }

    body{
        height: 50000px;
    }

    div{
        width: 600px;
        height: 600px;
        background: pink;
        margin: 40px;
        position: relative;
        float: left;
    }

    p{
        width: 300px;
        height: 300px;
        background: skyblue;
        position: absolute;
        top:100px;
        left:200px;
        margin-left:  100px;
        margin-top: 100px;
    }


</style>
</head>
<body>
<div>
    <p></p>
</div>
<script src="./jquery.min.js"></script>
<script>
    // 获取标签元素的占位

    
    // 1, offset()
    //    可以获取
    //       获取到 页面左上角 的间距
    //    可以设定
    //       设定参数是一个对象
    //       设定的是 当前标签 与 页面左上角 的间距
    //       与 标签 之前,写什么定位,写不写定位,写不写margin,写多少
    //       都没有任何关系, offset() 写多少,跟 页面左上角 就间距多少
    
    console.log($('p').offset());



    // 以定位形式来设定 与 页面左上角的间距
    // $('p').offset({left:0 , top:0});

    
    // 2, position()
    //    获取 当前标签 与 父级标签的 位置关系 --- 只获取定位的数值
    //    执行结果是一个对象
    //    只能获取,不能设定,不能传参

    // 获取p标签与定位父级div之间的定位关系
    // console.log( $('p').position()  ); 

    
    // offset()
    //    能获取能设定
    //    都是 与 页面左上角的 间距
    //    不管是什么,就获取或者设定与页面左上角的间距

    // position()
    //    只能获取,不能设定
    //    与父级的间距
    //    但是 只 获取定位的属性
    //    如果有 margin 是 不计算的
    //    因为 margin 本身也算是 标签占位一部分



</script>
</body>

获取浏览器上卷高度

<style>
    *{
        margin: 0;
        padding:0;
    }
    body{
        height: 5000px;
    }

    div{
        width: 100%;
        height: 100px;
        background: pink;
        position: fixed;
        top:0;
        left:0;
        display: none;
    }

    p{
        width: 100px;
        height: 100px;
        background: blue;
        position: fixed;
        top:500px;
        right:100px;
        font-size: 40px;
        color: red;
        display: none;
    }

</style>
</head>
<body>
    <div></div>
<p>返回</p>

<script src="./jquery.min.js"></script>

<script>
    // 获取浏览器上卷高度
    // scrollTop()    上卷的高度
    // scrollLeft()   平移的宽度
    // 不同考虑浏览器的兼容性,jQuery会来处理
    // 可以回去,也可以设定

    // jquery中,滚动条的监听事件
    $(window).scroll(function(){
        // 判断 浏览器的上卷高度 
        if($(window).scrollTop() > 500){
            // 大于 500 , 让 div,下拉显示
            $('div').slideDown();
            $('p').slideDown();
        }else{
            // 小于等于 500 , 当div,上卷隐藏
            $('div').slideUp();
            $('p').slideUp();
        }
    })

    // 点击返回顶部
    // 获取和设定时, 可以通过 $(window) 来进行操作
    //              也可以通过 $('html') 来进行操作
    // 设定自定义动画时, 必须只能使用 $('html') 来进行
    //                  $(window) , 不支持 动画效果的
    // 
    $('p').click(function(){
        // 如果是设定,可以是 $(window) 或者 $('html')
        // 不过 这个是 瞬间完成 的
        // $(window).scrollTop(0);

        // 通过自定义动画,使用动画效果完成
        // 只能是 $('html') 来执行
        $('html').animate( { scrollTop: 0 } , 2000 );
    })


    // 总结
    //    页面上卷操作
    //    1, 获取 和 设定
    //       scrollTop()   scrollLeft()
    //       没有参数是获取,有参数是设定
    //       获取和设定的对象,可以是 $(window)  或者  $('html')
    //       window 是一个 JavaScript 的 顶级对象
    //       要使用 jquery 的语法 必须要 加 $() 来转化
    //       $('html') 通过 html 标签名称 来获取标签对象 --- 选择器语法
    // 
    //   2,  自定义动画效果
    //       $('html').animate( {scrollTop:数值} , 时间 );
    //       只有 $('html') 支持动画效果


</script>
</body>

Allen·赵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
获取标签元素尺寸获取标签元素的位置获取浏览器上卷高度

获取标签元素尺寸 <style> *{ margin: 0; padding: 0; } div{ width: 300px; height: 300px; padding: 10px; border: 20px solid #000; margin: 30px; background: pink; /* 内减模式 */
复制链接

扫一扫