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

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

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

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

<span data-wiz-span="data-wiz-span" style="font-size: 1.167rem;"></span>
$("button").eq().click(function(){ alert($(".box1").scrollTop()) }) //获取头部卷上去的高度
<span data-wiz-span="data-wiz-span" style="font-size: 1.167rem;"></span>
//复制,让滚动到指定的位置 
$("button").eq().click(function(){ $(document).scrollTop() })

jquer属性 offset、position、scrollTop的更多相关文章

  1. pageX/Y, offset(), position(), scrollTop(), screenX/Y, clientX/Y, pageX/Y

    event.pageX get mouse position Description: The mouse position relative to the left edge of the docu ...

  2. offset() position() scrollTop() scrollLeft()

    (1)offset:获取当前元素相对于文档的高度.只对可见元素有效. 不管该元素如何定位,也不管其父元素如何定位,都是获取的该元素相对于当前视口的偏移 (2) position:获取元素相对于最近的一 ...

  3. javascript中常用坐标属性offset、scroll、client

    原文:javascript中常用坐标属性offset.scroll.client 今天在学习js的时候觉得这个问题比较容易搞混,所以自己画了一个简单的图,并且用js控制台里面输出测试了下,便于理解. ...

  4. CSS属性之position讲解

    postion 属性定义了一个元素在页面布局中的位置以及对周围元素的影响.该属性共有5个值: position: static position: inherit position: relative ...

  5. CALayer属性:position和anchorPoint

    一.position和anchorPoint 1.简单介绍 CALayer有2个非常重要的属性:position和anchorPoint @property CGPoint position; 用来设 ...

  6. 系列属性(offset、scroll、client)

    一.offset系列属性 <div id="dv"></div> <!-- 已在style标签里设置div宽高各100px --> <sc ...

  7. js中的offsetParent,offsetLeft,offsetTop及jquery的offset(),position()比较

    1.offsetParent 元素的offsetParent并不是元素的父元素,判断元素的offsetParent要根据以下情况: 1)当DOM结构层次中的元素均没有进行css定位(设置positio ...

  8. ☀【offset() / position()】

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...

  9. 关于css float 属性以及position:absolute 的区别。

    1.float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素.div一个典型的块 ...

随机推荐

  1. .net core partial view的一些心得

    原文:.net core partial view的一些心得 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog. ...

  2. Vs2019 C# .net core 将证书添加到受信任的根证书存储失败,出现以下错误:访问控制列表(ACL)结构无效

    https://www.cnblogs.com/xiyuan/p/10632579.html 使用 vs2017 创建一个 ASP.NET Core Web 应用程序 -> Ctrl + F5 ...

  3. JDBC 学习复习9 配置Tomcat数据源

    在实际开发中,我们有时候还会使用服务器提供给我们的数据库连接池,比如我们希望Tomcat服务器在启动的时候可以帮我们创建一个数据库连接池,那么我们在应用程序中就不需要手动去创建数据库连接池,直接使用T ...

  4. 关于ECharts甘特图的实现

    对于使用ECharts图表的步骤,每种图表都是一致的,相信大家也都了解 此处只分享甘特图的option,代码如下: option: { title: { text: '项目实施进度表', left: ...

  5. 关于Objective C的私有函数

    (1)很多从其他语言(例如C++)转到objective c的初学者,往往会问到一个问题,如何定义类的私有函数?这里的“私有函数”指的是,某个函数只能在类的内部使用,不能在类的外部,或者派生类内部使用 ...

  6. css-两个div并排,左边宽度固定右边自适应的布局 的实现方法

    <div class= "container"> <div class="left"></div> <div clas ...

  7. spider _其他库的简单操作与方法

    PHP : 网络IO java : 代码笨重,代码量很大 C/C++ :虽然效率高,但是代码成型很慢 1 通用网络爬虫(搜索引擎引用,需要遵守robots协议) 1 搜索引擎如何获取一个新网站的 UR ...

  8. JS 详解 Cookie、 LocalStorage 与 SessionStorage-转载

    记录一下这些知识,有时候用到会忘记,对原文作者表达感谢. 附上原文链接:JS 详解 Cookie. LocalStorage 与 SessionStorage 基本概念 Cookie Cookie 是 ...

  9. 最最常用的RAID

    若转载请于明显处标明出处:http://www.cnblogs.com/kelamoyujuzhen/p/8980696.html RAID stands for Redundant Array of ...

  10. 10_Azkaban案例实践3_Command操作HDFS

    HDFS操作任务 1.创建job描述文件 # fs.job type=command command=/usr/local/src/hadoop-2.6.4/bin/hadoop fs -mkdir ...