有时候项目中会用到用js获取元素位置来定位元素,首先通过图片说明scrollWidth,clientWidth,offsetWidth的关系。


JS获取各种宽度、高度的简单介绍:

scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

以上主要指IE之中,FireFox差异如下:

IE6.0、FF1.06+:

clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border

IE5.0/5.5:

clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height

(需要提一下:CSS中的margin属性,与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)

offsetWidth (width+padding+border)

假设 obj 为某个 HTML 控件。

obj.offsetTop 指 obj 距离上方或上层控件的位置,整型,单位像素。

obj.offsetLeft 指 obj 距离左方或上层控件的位置,整型,单位像素。

obj.offsetWidth 指 obj 控件自身的宽度,整型,单位像素。获取对象可见内容的宽度,不包括滚动条,不包括边框;

obj.offsetHeight 指 obj 控件自身的高度,整型,单位像素。

offsetWidth 与 style.width 的区别

一、offsetTop 返回的是数字,而 style.top 返回的是字符串,除了数字外还带有单位:px。

二、offsetTop 只读,而 style.top 可读写。

三、如果没有给 HTML 元素指定过 top 样式,则 style.top 返回的是空字符串。

js各种宽高(3)的更多相关文章

  1. js/jq宽高的理解与运用

    document:1. 与client相关的宽高document.body.clientWidthdocument.body.clientHeightdocument.body.clientLeftd ...

  2. js各种宽高(1)

    在javascript中操作dom节点让其运动的时候,常常会涉及到各种宽高以及位置坐标等概念,如果不能很好地理解这些属性所代表的意义,就不能理解js的运动原理,同时,由于这些属性概念较多,加上浏览器之 ...

  3. 原生js获取宽高与jquery获取宽高的方法的关系

    说明:1.因为获取高度的情况跟获取宽度的情况一样,所以以下只说获取宽度的情况.  2.以下所说的所有方法与属性所返回的值都是不带单位的.  3.为了方便说明,以下情况采用缩写表示:  obj -> ...

  4. JS 各种宽高

    1.window的各种宽高   outerWidth.innerWidth.outerHeight.innerHeight outerHeight 获取浏览器窗口外部的高度(单位:像素).表示整个浏览 ...

  5. js 浏览器 宽高 各种

    常用: JS 获取浏览器窗口大小   // 获取窗口宽度   if (window.innerWidth)   winWidth = window.innerWidth;   else if ((do ...

  6. js常用宽高属性

    document.body.clientWidth //body对象的宽度 document.body.clientHeight //body对象的高度 document.documentElemen ...

  7. js各种宽高(2)

    在javascript和jquery中,都有对各种高度的写法,在这里,我们就着重讲一下窗口.文档等高度的理解.(宽度和高度差不多!) jquery的各种高度 首先来说一说$(document)和$(w ...

  8. js获取宽高

    document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.docume ...

  9. JS/jQuery宽高的理解和应用

    1.widows:窗口.window对象可省略 2.document对象是window对象的一部分 浏览器的Html文档成为Document对象 window.location===document. ...

随机推荐

  1. CRM SQL 共享

     共四步 ,) PRIMARY KEY CLUSTERED, objectid UNIQUEIDENTIFIER NOT NULL, objecttype INT NOT NULL) ,,'883D4 ...

  2. SQL SERVER系统表

    sysaltfiles 主数据库 保存数据库的文件 syscharsets 主数据库 字符集与排序顺序sysconfigures 主数据库 配置选项syscurconfigs 主数据库 当前配置选项s ...

  3. 找不到方法"Boolean System.Threading.WaitHandle.WaitOne(TimeSpan)"的解决方案

    找不到方法"Boolean System.Threading.WaitHandle.WaitOne(TimeSpan)" http://www.microsoft.com/down ...

  4. Node.js上传文件

    var formidable = require('formidable'); var util = require('util'); exports.upload = function(req,re ...

  5. nginx/Windows-1.9.0的日志分割

    @echo offrem @echo off rem 取1天之前的日期echo wscript.echo dateadd("d",-1,date) >%tmp%\tmp.vb ...

  6. 黑马程序员_JAVA基础知识总结2

    ------- android培训.java培训.期待与您交流! ---------- IDE ---> Itegrity Development Environment Java EE --- ...

  7. (转)如何检查系统是否支持Zend Optimizer

    原文地址:http://blog.chinaunix.net/uid-25266990-id-2978539.html Zend Optimizer 主要有两个功能: 1.可以加速 PHP 脚本的执行 ...

  8. ETL,ESB,BPM为什么要这些图形

    ==================================== ETL模式架构:(ECCD架构) 捕获增量数据进行数据同步 ESB模式架构: 基于SOA以及工作流,通过适配器接入 BPM架构 ...

  9. 刻意练习,逃离舒适区——怎么样成为一个高手[罗辑思维]No.183_知识笔记

    2016/10/30 14:31:32   一.对事物的见解分为两类:         1.评论性的见解               说的内容都是对的,符合常理的,但是却是不解决问题的.       ...

  10. 洛谷P2264 情书

    P2264 情书 88通过 971提交 题目提供者lin_toto 标签字符串 难度提高+/省选- 提交该题 讨论 题解 记录 最新讨论 yyy快把题目改回来 噫 这题的题目好逗啊... 情书std ...