offset,scroll,client三大系列

offset 偏移

  • offsetWidth是指div的宽度(包括div的边框)
    offsetWidth = width + padding + border;
  • offsetHeight是指div的高度(包括div的边框)
    offsetHeight = Height + padding + border;
  • offsetLeft是指div到整个页面左边框的距离(不包括div的边框)
  • offsetTop是指div到整个页面上边框的距离(不包括div的边框)

scroll?????????滚动

  • scrollTop是指可视区顶部边框与整个页面上部边框的看不到的区域。
  • scrollLeft是指可视区左边边框与整个页面左边边框的看不到的区域。
  • scrollWidth是指左边看不到的区域加可视区加右边看不到的区域即整个页面的宽度(包括边框)
  • scrollHeight是指上边看不到的区域加可视区加右边看不到的区域即整个页面的高度(包括边框)

client?? 可视区、客户端

  • event.clientX是指鼠标到可视区左边框的距离。
  • event.clientY是指鼠标到可视区上边框的距离。
  • clientWidth是指可视区的宽度。(内容区+内边距,不包括边框)
  • clientHeight是指可视区的高度。(内容区+内边距,不包括边框)
  • clientTop和clientLeft 几乎不用,因为滚动条不会在顶部和左侧

x , y

  • clientX、clientY
    点击位置距离当前body可视区域的x,y坐标
  • pageX、pageY
    对于整个页面来说,包括了被卷去的body部分的长度
  • screenX、screenY
    点击位置距离当前电脑屏幕的x,y坐标
  • offsetX、offsetY
    相对于带有定位的父盒子的x,y坐标

区别

width,height
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
scrollWidth = 内容宽度(不包含border)
scrollHeight = 内容高度(不包含border)

top,left
offsetTop/offsetLeft :
调用者:任意元素。(盒子为主)
作用:距离父系盒子中带有定位的距离。
scrollTop/scrollLeft:(盒子也可以调用,必须有滚动条)
调用者:document.body.scrollTop/.....(window)
作用:浏览器无法显示的部分(被卷去的部分)
clientY/clientX:(clientTop/clientLeft 值的是border)
调用者:event.clientX(event)
作用:鼠标距离浏览器可视区域的距离(左、上)

原文地址:https://www.cnblogs.com/huihuihero/p/10801062.html

时间: 2024-11-09 08:20:35

offset,scroll,client三大系列的相关文章

js进阶之js三大家族:offset,scroll,client

offset与style的区别offset可以得到任意样式表中的样式值offset系列的数值没有单位offsetWidth包含padding+border+widthoffsetwidth等属性是只读属性,只能获取,不能赋值 所以,我们想要获取元素大小的位置,用offset更合适stylestyle只能获取到行内样式表stylewidth获得的是带有单位的字符串style.width不包括padding和border的值style.width是可读属性,可以获取也可以赋值 点语法与offset获

元素的client offset scroll三个系列

clientWidth/clientHeight/clientTop/clientLeft offsetWidth/offsetHeight/offsetLeft/offsetTop/offsetParent scrollWidth/scrollHeight/scrollTop/scrollLeft 原文地址:https://www.cnblogs.com/dmzzyc/p/10054762.html

js-width/height/top/left/offset/scroll/client

让你彻底弄清offset:http://www.cnblogs.com/jscode/archive/2012/09/03/2669299.htmlJavascript/Jquery获取浏览器和屏幕各种高度宽度:http://www.cnblogs.com/EricaMIN1987_IT/p/3593431.html

client,offset.scroll系列/案例

一.client, offset, scroll系列 1.client系列 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>client</title> <style type="text/css"> .box{ width: 100px; height: 100px; position: absolute; b

offset、client、scroll开头的属性归纳总结

HTML元素有几个offset.client.scroll开头的属性,总是让人摸不着头脑.在书中看到记下来,分享给需要的小伙伴.主要是以下几个属性: 第一组:offsetWidth,offsetHeight,offsetLeft,offsetTop,offsetParent  第二组:clientWidth,clientHeight,clientLeft,clientTop 第三组:scrollWidth,scrollHeight,scrollLeft,scrollTop 详细定义如下: 1.1

js的offset,client,scroll的区别

javascript的offset.client.scroll在使用过程中非常频繁,接下来将对此进行一一介绍,了解其区别和使用方法. offsetTop 指元素距离上方或上层控件的位置,整型,单位像素.  offsetLeft 指元素距离左方或上层控件的位置,整型,单位像素.  offsetWidth 指元素控件自身的宽度,整型,单位像素.  offsetHeight 指元素控件自身的高度,整型,单位像素.  网页可见区域宽:document.body.clientWidth  网页可见区域高:

MySql command line client 命令系列

—————————————————————————————————————————————————————————— 一.启动与退出 1.进入MySQL:启动MySQL Command Line Client(MySQL的DOS界面),直接输入安装时的密码即可.此时的提示符是:mysql> 2.退出MySQL:quit 或 exit 二.库操作 1.创建数据库 命令:create database 例如:建立一个名为xhkdb的数据库 mysql> create database xhkdb;

js 元素offset,client , scroll 三大系列总结

1,element.offsetWidth : 包括 padding 和 边框 2,element.clientWidth : 包括 padding ,不包含边框 , 内容超出会溢出盒子的时候,就用scrollWidth 3,element.scrollWidth : 不包含边框 主要用法: 1,offset 系列 经常用于获得元素位置 offsetLeft  offsetTop 2,client经常用于获取元素大小, clientWidth , clientHeight 3,scroll经常用

offset、 client 、 scroll 三大系列

1.offset   只能获取,不能赋值 (1)元素.offsetParent   //返回当前元素最近的定位父元素 console.log (son.offsetParent) (2)元素.offsetLeft     //返回offsetParent的左偏移量 console.log (son.offsetLeft) (3)元素.offsetTop      //返回offsetParent的上偏移量 console.log (son.offsetTop) (4)元素.offsetWidth