位置: 编程技术 - 正文
JS获取各种宽度、高度的简单介绍(js获取宽高)
编辑：rootadmin推荐整理分享JS获取各种宽度、高度的简单介绍(js获取宽高)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:js获取div宽度,js获取字符串宽度,js获取文字所占的宽度,js获取元素的宽度,js获取字符串宽度,js 获取dom宽度,js获取元素的宽度,js获取元素的宽度,内容如对您有帮助，希望把文章链接给更多的朋友！
有时候项目中会用到用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.+：
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 返回的是空字符串。
浅谈Javascript中匀速运动的停止条件 我们先来看下之前的匀速运动的代码，修改了速度speed后会出现怎么样的一个bug。这里加了两个标杆用于测试styletype="text/css"#div1{width:px;height:px;positi
javascript操作字符串的原生方法 join([分隔符])数组元素组合为字符串toString()以字符串表示数组reverse()数组反转--改变原数组本身valueOf()返回数组值htmlheadscripttype="text/javascript"varfruits=["苹
javascript定义变量时加var与不加var的区别 一、外部的为全局，内部的为局部变量。二、加var为局部变量(在方法内)，不加var为全局变量(当方法内有一次使用后)scripttype="text/javascript"vargolbe="global";
标签: js获取宽高
本文链接地址:https://www.jiuchutong.com/biancheng/384763.html 转载请保留说明！
![[cocos2dx学习笔记]用cocos2dx3.X完成塔防游戏王国保卫战--地图（一）(cocos2dx4.0教程)](https://www.jiuchutong.com/image/20240129/1706502527.jpg)
