码迷,mamicode.com
首页 > Web开发 > 详细

jQuery使用(十):jQuery实例方法之位置、坐标、图形(BOM)

时间:2019-03-06 14:55:18      阅读:227      评论:0      收藏:0      [点我收藏+]

标签:font   ref   href   方法   nbsp   .com   图片   窗口   大小   

  • offset()
  • position()
  • scrollTop()、scrollLeft
  • width()、height()
  • innerWidth()、outerWidth()、innerHeight()、outerWidth()

 jQuery坐标图形大小相关

offset()

返回或设置元素距离浏览器的距离{top,left}

技术图片

设置浏览器距离会累计父级的浏览器距离,当设置值小于父级相对浏览器距离时会出现负样式值。

具体参数和使用方法参考手册:http://www.runoob.com/jquery/css-offset.html

position()

返回jQuery对象中第一个DOM相对于父级的距离

技术图片

即相对于父级元素链上第一个定位元素的距离。(这个方法不能设置值)

具体参数和使用方法参考手册:http://www.runoob.com/jquery/css-position.html

scrollTop()、scrollLeft

返回窗口或者出现滚动条的元素的纵向和横向滚动条的距离。

 技术图片

获取浏览器滚动条的距离:$(window).scrollTop();

获取元素上的滚动条距离:$(".wrapper").scrollTop();

width()、height()

设置和返回元素的宽高(content区域)

innerWidth()、innerHeight()

返回第一个匹配元素的内部宽高(content+padding)

outerWidth()、outerWidth()

返回第一个匹配元素的外部宽高(padding+border)

outerWidth(true)、outerWidth(true)

传入参数true以后就会返回(padding + borde + margin)

技术图片

jQuery使用(十):jQuery实例方法之位置、坐标、图形(BOM)

标签:font   ref   href   方法   nbsp   .com   图片   窗口   大小   

原文地址:https://www.cnblogs.com/ZheOneAndOnly/p/10372160.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!