jq尺寸和位置总结篇(width scrollTop position offset)

一、先讲一下元素的尺寸吧,这个用的很多。

1  .width() .height() 获取元素的宽度,并且不含单位,相当于原生的offsetWidth,但是要注意2点

  原生的结果包含单位,并且是没办法获取到隐藏元素的宽高的。

2  .innerWidth() .innerHeight() // 相当于width+padding

3  .outerWidth() .outerHeight() // 相当于width + padding + border

4  .outerWidth(true) .outerHeight(true) // 相当于width + padding + border + margin

以上几个用法用的蛮多的,以前也用过,但是要注意,这些方法不仅可以用来获取,也可以用来设置,比如,.outerWidth(200,true);

可视区的宽度, $(window).height();

页面的高度,    $(document).height();

页面的滚动距离 ,  $(document).scrollTop();这里即可获取,也可设置。

二、距离位置

$().offset().left   //元素到整个页面的距离,注意这里left 和 top 不用加括号(经常犯错!)

$().position().left  //元素到有定位的祖先节点的距离,如果没找到,则是到页面的距离,(注意这里是认margin值的)

时间: 2025-01-02 09:43:20

jq尺寸和位置总结篇(width scrollTop position offset)的相关文章

web前端开发中常用的尺寸和位置

我们在日常web前端开发过程中,会经常用到各种尺寸和位置.通常是js做动画的时候.轮播图,滚屏动画,粒子,碰撞检测,拖拽,滚动加载等等.这里我将常用的尺寸和位置的获取进行总结,不包括canvas,SVG. 在web页面开发中,尺寸和位置分为屏幕的尺寸和位置,元素的尺寸和位置,还有一个是文档的尺寸和位置,不过文档的尺寸和位置是通过document.body获取的,也算是一个元素.还有鼠标的位置.所以尺寸和位置主要分为三类: 屏幕尺寸和位置 元素尺寸和位置 特殊的元素,文档的尺寸和位置 鼠标的位置(

深入学习jQuery元素尺寸和位置操作

× 目录 [1]尺寸设置 [2]位置设置 前面的话 对于javascript来说,元素尺寸有scroll.offset.client三大属性,以及一个强大的getBoundingClientRect()方法.而jQuery有着对应的更为简便的方法.本文将详细介绍jQuery中的元素尺寸和位置操作 尺寸设置 在CSS中,宽高有三种表示,分别是content-box.padding-box和border-box里的三种宽高.可以分别对应于jQuery中height()/width().innerHe

js-获取DOM尺寸、位置

获取DOM尺寸.位置 查看滚动条的滚动位置 window.pageXOffset / window.pageYOffset(IE8及其以下版本不支持) document.body/documentElement.scrollLeft/scrollTop 兼容性比较混乱,使用时通常取两个属性值相加,因为不可能存在两个同时有值. 封装兼容性方法getScrollOffset(): function getScrollOffset(){ if(window.pageXOffset){ return{

223 jQuery 尺寸、位置操作

? jQuery中分别为我们提供了两套快速获取和设置元素尺寸和位置的API,方便易用,内容如下. 1.4.1 jQuery 尺寸操作 ? jQuery 尺寸操作包括元素宽高的获取和设置,且不一样的API对应不一样的盒子模型. 语法 代码演示 <body> <div></div> <script> $(function() { // 1. width() / height() 获取设置元素 width和height大小 console.log($("

图解JQUERY尺寸及位置定义

最近在学习JQUERY的一些应用,接触到了JQUERY对于元素尺寸及位置定义,还有就是配合浏览器尺 寸及状态的计算所做出的一些动画特效.其实像这类JQUERY应用无外乎涉及这些属性的调用:innerHeight().innerWidth(). outerHeight().outerHeight(true).outerHeight(false).outerWidth(true). outerWidth(false).position().offset().scrollTop().scrollLef

ios4--UIView的常见属性(尺寸和位置)

// // ViewController.m // 08-UIView的常见属性(尺寸和位置) // // frame:相对于父控件左上角定位 // bounds:改变长宽,左上角是相对于自己 // center: #import "ViewController.h" @interface ViewController () /** label */ @property (nonatomic, weak) UILabel *label; @end @implementation Vie

js 表格、表单、元素尺寸和位置

复习 DOM : document object model DOM节点关系属性 childNodes 元素\注释\文本 children 元素 firstChild 第一个子节点 firstElementchild 第一个元素子节点 lastChild lastElementChild parentNode offsetParent previousSibling previousElementSibling nextSibling nextElementSibling 节点增删改,复制 do

Flutter 获取控件尺寸和位置

1. 插件必须渲染好, final RenderBox box = globalKey.currentContext.findRenderObject(); final size = box.size; final topLeftPosition = box.localToGlobal(Offset.zero); return topLeftPosition.dy; 2. 可以通过context.size获取当前控件的尺寸和位置offset信息 下面是示例,通过contex.size.heigh

jQuery中animate与scrollTop、offset().top实例

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con