zoukankan      html  css  js  c++  java
  • jquer属性 offset、position、scrollTop

    尺寸操作
    1、获取宽高
         a) jq对象.height/width () :只有获取高度/宽度
            尺寸,不包括padding和margin 和 border
    2、设置宽度
       a) Jq对象 . height/ width("200px");
       b) px可加可不加,不加不需要写双引号
    jQuery(function(){
                //获取宽度
                $("button").eq(0).click(function(){
                    和js offsetWidth 不一样
                   alert( $("div").width())
                });
    
                //设置宽度
                $("button").eq(1).click(function(){
                    $("div").width(200)
                })
    
                //获取高度
                $("button").eq(2).click(function(){
                    alert( $("div").width())
                });
    
                //设置高度
                $("button").eq(3).click(function(){
                    $("div").width(200)
                });
    
            })
     
    坐标值操作
    1、offset(). left /top 获取该对象距离页面顶端 左边的距离
     //offset().top 获取对象距离页面顶部/左边的距离 和定位没关系
                $("button").eq(0).click(function(){
                    alert($(".box2").offset().top)
                });
    
                // 无用,只能获取值 不能赋值
                $("button").eq(1).click(function(){
                    $(".box2").offset().top=100
                })
            }

    2、position(). left/top 距离最近的定位父级元素的上边距 左边距

       //position().top 距离定位的父盒子上边距 / 左边距
                // 不包含margin padding 就的定位的距离
                $("button").eq(2).click(function(){
                    alert($(".box2").position().top)
                });

    3、scrollTop/left 被卷曲的头部高度 

    <span data-wiz-span="data-wiz-span" style="font-size: 1.167rem;"></span>
    $("button").eq(4).click(function(){ alert($(".box1").scrollTop()) }) //获取头部卷上去的高度
    <span data-wiz-span="data-wiz-span" style="font-size: 1.167rem;"></span>
    //复制,让滚动到指定的位置 
    $("button").eq(5).click(function(){ $(document).scrollTop(200) })
  • 相关阅读:
    typescript基础语法--变量/函数/指令/类
    java获取post请求头部字符串
    spring MVC 3.2中@ResponseBody(Post接口)返回乱码的完美解决方案
    java+js正则表达式获取URL(带端口)域名
    jquery的ajax提交时加载处理方法
    js截取+全部替换+字符串
    Filter过滤器除去部分URL链接
    Eclipse常用快捷键
    CAS+Tomcat SSL第三方数据证书导入(jks)
    CAS客户端和服务器配置https证书
  • 原文地址:https://www.cnblogs.com/wdz1/p/7868776.html
Copyright © 2011-2022 走看看