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

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

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

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

  1. <span data-wiz-span="data-wiz-span" style="font-size: 1.167rem;"></span>
  1. $("button").eq().click(function(){ alert($(".box1").scrollTop()) }) //获取头部卷上去的高度
  1. <span data-wiz-span="data-wiz-span" style="font-size: 1.167rem;"></span>
  1. //复制,让滚动到指定的位置
    $("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. c# winfrom 子窗体分屏显示

    参考博客:https://blog.csdn.net/kailan818/article/details/8517126 实现代码: private void button1_Click(object ...

  2. 通过gpio控制一个进程开启或关闭

    目标: 板子上有个进程需要通过读取gpio的值, 当gpio值为1 时, 开启指定的进程,当gpio为0时, 杀掉这个指定的进程. #include <stdio.h> int main( ...

  3. ubantu18.04 配置nginx与uwsgi(前后端分离)

    ubantu18.04 配置nginx与uwsgi   一.首先先安装nginx静态服务 先更新 sudo apt-get update 1.安装gcc g++的依赖库 sudo apt-get in ...

  4. 2.原子变量 CAS算法

    前面提到,使用volatile无法保证 变量状态的原子性操作,所谓原子性,就是不可再分 如:i++的原子性问题,i++ 的操作实际上分为三个步骤  "读-改-写" (1)保存i的值 ...

  5. Java基础加强-反射机制

    反射的基石 -> Class 类(字节码)/*只要是在源程序中出现的类型,都要各自的Class实例对象,例如:int,int[],void*/如何得到各个字节码对应的实例对象(Class类型) ...

  6. [LeetCode] 15. 3Sum ☆☆☆(3数和为0)

    描述 Given an array nums of n integers, are there elements a, b, c in nums such that a + b + c = 0? Fi ...

  7. 安装jdk配置环境变量后jps command not found

    配置Java环境变量的时候一般是 vi /etc/profile 然后按两个大写的G就会跑到最后一行去,然后配置写入下文: 这个时候你jps查看Java的进程会出现: 分析原因: 一般是配置之后,没有 ...

  8. kbmMW 5.10.01试用报告

    1.FileClient.SameFile 调用这个方法,当本地文件不存在时,会一直等待.跟踪代码,发现: function TkbmMWCustomFileClient.SameFileEx(Loc ...

  9. (1)openstack-Rabbitmq 集群部署

    一.前期准备   (1)条件:准备3台linux系统,确保配置好源,及epel源  yun1,yun2,yun3   (2)三台机器能够静态解析彼此   (3)设置可以无密钥登陆  ssh-keyge ...

  10. JavaScript展开操作符(Spread operator)介绍

    本文介绍JavaScript的展开操作符(Spread operator)....本文适合ES6初学者. 你可以通过展开操作符(Spread operator)...扩展一个数组对象和字符串.展开运算 ...