前端碎碎念

jQuery操作元素的位置和尺寸

2019-02-22  本文已影响0人  const_express

其实在jq中 通过jq对象.css也能实现 但是比较麻烦 所以今天说一个比较简单的

先简单写个大纲

操作元素尺寸

一共有三种 一层一层的 以盒子模型为基础

1.width 和 height

获取:jq对象.width()/height();
设置:jq对象.width(数字)/height(数字);
这个操作的是文本区域的大小

2.innerWidth 和innerHeight 文本+padding

获取:jq对象.innerWidth()/innerHeight
设置:jq对象.innerWidth(数字)/innerHeight(数字)
操作的是文本区域和padding的大小

3.outerWidth 和outerHeight 操作的是文本内容+padding+border

获取:jq对象.outerWidth()/outerHeight()
设置:jq对象.outerWidth(数字)/outerHeight(数字)
操作的是文本内容+padding+border

以上三种在设置的时候 都是只更改文本内容的大小 innerWidth innerHeight outerWidth和outerHeight 比如从原本的400变成200 padding和border是不会变的
也就是 200里面 padding还是原来的padding border还是原来的border
只不过变了心(文本)

操作元素位置

这里有两种 一种是基于文档的位置 一种是基于定位的位置

1.元素在文档中的位置

获取:jq对象.offset()获取的是teft值 和top值 且这两个值是可以直接.left
.top 取出的 一般我们在做回到顶部 楼梯导航的时候 要根据这个获取间距
设置:jq对象.offset(left:,top:) 但是一般不设置、。。
这个和定位没有一点关系 即使写一万个定位 也不会影响。。。
除非你用下面这个 这个就是操作有定位关系的元素的

2. 元素距离上级定位元素的距离

获取:jq对象.position() 获取的也是left值和top值 只是相对于上级元素的值
设置 是不能设置的 这辈子是不可能设置的 除非用
css

3. 操作上卷的页面间距(滚动条)

获取:jq对象.scrollTop() 返回一个数字
设置:jq对象.scrollTop(数字)

案例:回到顶部的京东版和淘宝版
看了一下京东是 直接点击就回去的 淘宝是有一个动画效果 慢慢的回去 这就需要自定义动画animate 里面写回去 外面写时间
代码待补充。。。。。。。。。。。

上一篇下一篇

猜你喜欢

热点阅读