javascript 元素的大小

1、偏移量

元素的可见大小由其高度、宽度决定,包括所有内边距、滚动条和边框大小(不包含外边距)。通过下列4个属性可以获取元素的偏移量:

offsetHeight:

offsetWidth:

offsetLeft:元素的左外边框包含元素的左内边距的像素距离;

offsetTop:元素的上外边框至包含元素上内边距的像素距离。

其中,offsetLeft和offsetTop属性与包含元素有关,包含元素的引用保存在offsetParent属性中。

2、客户区大小

元素的客户区大小,指的是元素内容及其内边距所占据的空间大小。有关客户区大小的属性有两个:clientWidth和clientHeight。

其中,clientWidth属性是元素内容区宽度加上左右内边距宽度;clientHeight属性是元素内容区高度加上上下内边距高度。

clientWidth = padding + width;

clientHeight = padding + height;

客户区大小就是元素内部的空间大小,因此滚动条占用的空间不在内。要确定浏览器的视口大小,可以使用document.documentElement或document.body的clientWidth和clientHeight。

3、滚动大小

滚动大小指的是包含滚动内容的元素的大小。有些元素,即使没有执行任何代码也能添加滚动条;但另外一些元素,则需要通过CSS的overflow属性进行设置才能滚动。以下是4个与滚动大小相关的属性。

scrollHeight:在没有滚动条的情况下,元素内容的总高度

scrollWidth:在没有滚动条的情况下,元素内容的总宽度

scrollLeft:被隐藏在内容区域左侧的像素数

scrollTop:被隐藏在内容区域上方区域的像素数

scrollWidth和scrollHeight主要用于确定元素内容的实际大小。通常认为<html>元素是在web浏览器的视口中滚动的元素。因此,带有垂直滚动条的页面总高度就是document.documentElement.scrollHeight。

时间: 2024-10-13 09:15:56

javascript 元素的大小的相关文章

【全面总结】js获取元素位置大小

目录 1.关于offset offsetParent(只读) offsetTop(只读) offsetLeft(只读) offsetHeight(只读) offsetWidth(只读) 2.滚动尺寸scroll scrollWidth(只读) scrollHeight(只读) scrollLeft(可写) scrollTop(可写) 3.关于client clientWidth(只读) clentHeight(只读) clientLeft(只读) clientTop(只读) 4.关于client

CSS3可伸缩框属性,可用于等分显示子元素或按比例显示子元素的大小

用法跟Android的android:layout_weight属性类似,可类比Android中的用法,这样比较好记,由于目前所有浏览器都不支持大部分的属性,所以所有的属性都需要加上Firefox.Safari.Opera 以及 Chrome支持替代的-moz-和-webkit-前缀,现在基本上所有的CSS3属性都应该这样做,即每个属性都需要至少设置三个,参考下面的例子. 父容器属性: display:box;当定义了这个属性时,子元素想居中显示时margin:0px auto是无效的,需使用t

Javascript 验证上传图片大小[客户端验证]

需求分析: 在做上传图片的时候,如果不限制上传图片大小,后果非常的严重.那么我们怎样才可以解决一个棘手的问题呢?有两种方式: 1)后台处理: 也就是AJAX POST提交到后台,把图片上传到服务器上,然后获得该图片大小做处理. 2)前台处理: 也就是利用Javascript获取该图片大小. 显然第一种方式,很不好.因为需要把文件先上传到服务器上,如果文件很大的话,在加上网不是很快,需要等待好长时间,治标不治本. 功能解析: 在这里我只介绍IE与FireFox两个浏览器的不同做法. IE6: 关键

Javascript验证上传图片大小[前台处理]

需求分析: 在做上传图片的时候,如果不限制上传图片大小,后果非常的严重.那么我们怎样才可以解决一个棘手的问题呢?有两种方式: 1)后台处理: 也就是AJAX POST提交到后台,把图片上传到服务器上,然后获得该图片大小做处理. 2)前台处理: 也就是利用Javascript获取该图片大小. 显然第一种方式,很不好.因为需要把文件先上传到服务器上,如果文件很大的话,在加上网不是很快,需要等待好长时间,治标不治本. 功能解析: 在这里我只介绍IE与FireFox两个浏览器的不同做法. IE6: 关键

mydate97时间控件最大值最小值限制及Javascript日期判断大小

<script language="javascript" type="text/javascript" src="<%=basePath %>js/datePicker/WdatePicker.js"></script><form id="searchForm" action="trans/triplist" method="post" ons

JavaScript比较日期大小

JavaScript比较日期大小 使用两种方式判断日期的大小: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Date</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> &l

JavaScript的DOM_获取元素周边大小

一.clientLeft 和 clientTop 这组属性可以获取元素设置了左边框和上边框的大小,目前只提供了 Left 和 Top 这组,并没有提供 Right 和 Bottom. <script type="text/javascript"> window.onload = function(){ var box = document.getElementById("box"); alert(box.clientLeft); alert(box.cl

鼠标拖动改变DIV等网页元素的大小的最佳实践

1.初次实现 1.1 html代码 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>div change

JavaScript - 元素的显示和隐藏

元素的显示和隐藏 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>元素的显示和隐藏</title> <style type="text/css"> img{ display:block; } </style> <script type="text/