孙肖宁

jQuery中尺寸位置的操作
高度和宽度高度操作height() : 作用:设置或获取匹配元素的高度值带参数表示设置高度$(selector)...
扫描右侧二维码阅读全文
13
2018/05

jQuery中尺寸位置的操作

高度和宽度

  • 高度操作height() :
    作用:设置或获取匹配元素的高度值

    • 带参数表示设置高度$(selector).height(200);
    • 不带参数获取高度$(selector).height();
  • 宽度操作width() :
    作用:设置或获取匹配元素的宽度值

    • 带参数表示设置宽度
    • 不带参数获取宽度

注意:

  • 获取到的值仅仅是盒子和高度或宽度,和内外边距边框无关。
  • css()获取高度(或宽度width)和height获取高度(或宽度width)的区别:

    • css()获取高度(或宽度width)的返回值是number类型,没有单位。
    • height获取高度(或宽度width)的返回值是string类型,有单位。

坐标值的操作

  • offset()
    作用:获取或设置元素相对于文档的位置

    • 无参数表示获取,返回值为:{left:num, top:num},值是相对于document的位置$(selector).offset();
    • 有参数表示设置,参数推荐使用数值类型$(selector).offset({left:100, top: 150});

      注意:距离页面最顶端或者最左侧的距离和有没有定位没有关系。设置offset后,如果元素没有定位(默认值:static),则被修改为relative。

  • position()
    作用:获取相对于其最近的具有定位的父元素的位置。距离父系盒子中带有定位的盒子的距离(获取的就是定位值,和margin/padding无关)

    • 获取,返回值为对象:{left:num, top:num}。$(selector).position();
      注意:只能获取,不能设置。
  • scrollTop()
    作用:获取或者设置元素垂直方向滚动的位置

    • 无参数表示获取偏移
    • 有参数表示设置偏移,参数为数值类型
      案例:$(selector).scrollTop(100);
  • scrollLeft()
    作用:获取或者设置元素水平方向滚动的位置
    案例:$(selector).scrollLeft(100);
    描述:

    • 垂直滚动条位置 是可滚动区域 在 可视区域上方的 被隐藏区域的高度。
    • 如果滚动条在最上方没有滚动 或者 当前元素没有出现滚动条,那么这个距离为0
Last modification:May 13th, 2018 at 02:02 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment