1、scroll滚动(scrollTop、Left、Height、Width)

scroll()当用户滚动指定的元素时,会发生 scroll 滚动事件;

scrollWidth、scrollHeight属性表示元素对象真实的宽高;

scrollTop() 方法设置返回被选元素的垂直滚动条位置。当滚动条位于最顶部时,位置是 0。

scrollHeight-scrollTop=clientHeight;表示垂直滚动条走到底了(前提margin\padding都为0)

2、client 客户端(clientWidth、clientHeight)

浏览器的宽度:document.body.clientWidth;

3、offset偏移(offsetHeight、offsetWidth、offsetTop、offsetLeft)

offsetHeight、offsetWidth:表示当前对象的高、宽。

offsetTop、offsetLeft:表示当前元素对象相对于其定位元素的垂直、水平偏移量;

offset()可返回、可设置元素的偏移坐标

$(selector).offset():获取某元素当前的方位,返回偏移坐标;

$(selector).offset({top:value,left:value})设置偏移坐标

$(selector).offset().left 返回偏移坐标距离左边的位移

$(selector).offset($(selector).offset())使用另一元素的偏移坐标为元素设置偏移坐标

4、$(window).width();获取浏览器的宽度

$(window).height();获取浏览器的高度

$("#xx").width()/height()获取元素的宽度/高度

scrollHieght、offsetHeight、clientHeight、width、height的更多相关文章

  1. 四种浏览器对 clientHeight、offsetHeight、scrollHeight、clientWidth、offsetWidth 和 scrollWidth 的解释差异

    网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWid ...

  2. 详解clientHeight、offsetHeight、scrollHeight

    关于clientHeight.offsetHeight.scrollHeight   window.screen.availWidth 返回当前屏幕宽度(空白空间)  window.screen.av ...

  3. clientHeight、offsetHeight、scrollHeight详解

    网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body.offs ...

  4. 关于height、offsetheight、clientheight、scrollheight、innerheight、outerheight的区别一览

    平时,不管在pc端页面还是移动端页面,因为我们一般很少会设置某个块的的高度,但是呢,我有时候有需要取到这些高度以便于我们方便进行判断和下一步的编写.一般这个时候我都是直接的获取一个块的高度.heigh ...

  5. JS中的offsetWidth、offsetHeight、clientWidth、clientHeight等等的详细介绍

    javascript中offsetWidth.clientWidth.width.scrollWidth.clientX.screenX.offsetX.pageX 原文:https://www.cn ...

  6. jquery 对象的 height、innerHeight、outerHeight 的区别以及DOM 元素的 clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop

    前言:jquery 对象的 height.innerHeight.outerHeight,还有 DOM 元素的 clientHeight.offsetHeight.scrollHeight.offse ...

  7. clientWidth、clientHeight、offsetWidth、offsetHeight以及scrollWidth、scrollHeight

    clientWidth.clientHeight.offsetWidth.offsetHeight以及scrollWidth.scrollHeight是几个困惑了好久的元素属性,趁着有时间整理一下 1 ...

  8. 浏览器中如何获取想要的offsetwidth、、、clientwidth、、offsetheight、、、clientheight。。。

    clientWidth是对象看到的宽度(不含边线,即border)scrollWidth是对象实际内容的宽度(若无padding,那就是边框之间距离,如有padding,就是左padding和右pad ...

  9. JS-scrollTop、scrollHeight、clientTop、clientHeight、offsetTop、offsetHeight的理解

    scrollTop, 可写(这些属性中唯一一个可写的元素) Element.scrollTop 属性可以获取或设置一个元素的内容垂直滚动的像素数. 一个元素的 scrollTop 值是这个元素的顶部到 ...

  10. 转 top、postop、scrolltop、offsetTop、scrollHeight、offsetHeight、clientHeight

    1.top 此属性仅仅在对象的定位(position)属性被设置时可用.否则,此属性设置会被忽略. 复制代码 代码如下: <div style=" position:absolute; ...

随机推荐

  1. 正经学C#_位移与其位移运算符[c#入门经典]

    在c#入门经典一书中,最为糟糕的一节就是位移了,完全没有讲明白,也没有说全,似乎只是轻轻点了一下何为位移,带了两次原码和补码,完全不理会是否明白不明白.这一点这本书很差.因为此书说了,在大多数应用开发 ...

  2. ubuntu - 14.04,安装rpm程序!!

    一,安装rpm转deb的工具“alien”:在软件中心里面输入“alien”,看是否已经安装,如果没有安装则直接安装. 二,把rpm转换为deb:在shell里输入“sudo alien --scri ...

  3. angular原理及模块简介

    Angular简介(大神可略过) Angular是一个强大的前端框架,其强大之处主要是可以把静态页面与动态数据绑定起来.平时我们看到的网页界面上面的数据都是固定,但如果我们要变化这些数据,例如我在一个 ...

  4. PHP实现微信公众平台开发—基础篇

    PHP实现微信公众平台开发—基础篇 2 1课程介绍 2 2. 微信公众号账号介绍的申请流程详解 2 2.1微信三角色关系 2 2.2信息流的过程 2 2.4微信公众账号的认证 3 2.5订阅号的申请流 ...

  5. Shell-3-文件之名

    1.生成任意大小的文件 [root@localhost tmp]# dd 记录了1+0 的读入 记录了1+0 的写出 1048576字节(1.0 MB)已复制,0.00219263 秒,478 MB/ ...

  6. c# 中virtual与abstract

    在C#的学习中,容易混淆virtual方法和abstract方法的使用,现在来讨论一下二者的区别.二者都牵涉到在派生类中与override的配合使用. 一.Virtual方法(虚方法) virtual ...

  7. Quadratic Residues POJ - 1808 二次剩余定理

    \(\color{#0066ff}{题目链接 }\) link \(\color{#0066ff}{ 题解 }\) 结论题 \((\frac{a}{p})=a^{\frac{p-1}{2}}\mod ...

  8. [比赛|考试]nowcoder NOIPpj组第二场

    nowcoder NOIPpj组第二场 370pts/400pts(100,100,100,70) rank3 给自己的反思:前3题都A了,T4O(N^2)不会就是不会(没准是我懒得推了),DP了70 ...

  9. SIGHUP信号

    SIGHUP会在以下3种情况下被发送给相应的进程:1.终端关闭时,该信号被发送到session首进程以及作为job提交的进程(即用 & 符号提交的进程)2.session首进程退出时,该信号被 ...

  10. kuangbin专题七 POJ3468 A Simple Problem with Integers (线段树或树状数组)

    You have N integers, A1, A2, ... , AN. You need to deal with two kinds of operations. One type of op ...