关于对象的 width offsetwidth availWidth scrollHeight

别人总结的。自己记不住,所以留着 了

offsetWidth 包含了对象的边线的宽度
width 若你不在html 代码里明确指定这个值,那它的返回值会不一样,如果设置了width 则一样。

widht 返回的是 30px ,offsetWidth是数字 30 . 

//在javascript中得到当前窗口的高和宽
<body><SCRIPT LANGUAGE="JavaScript">
var  s = "";
s += "\r\n网页可见区域宽:"+ document.body.clientWidth;
s += "\r\n网页可见区域高:"+ document.body.clientHeight;
s += "\r\n网页可见区域宽:"+ document.body.offsetWidth  +" (包括边线和滚动条的宽)";
s += "\r\n网页可见区域高:"+ document.body.offsetHeight +" (包括边线的宽)";
s += "\r\n网页正文全文宽:"+ document.body.scrollWidth;
s += "\r\n网页正文全文高:"+ document.body.scrollHeight;
s += "\r\n网页被卷去的高:"+ document.body.scrollTop;
s += "\r\n网页被卷去的左:"+ document.body.scrollLeft;
s += "\r\n网页正文部分上:"+ window.screenTop;
s += "\r\n网页正文部分左:"+ window.screenLeft;
s += "\r\n屏幕分辨率的高:"+ window.screen.height;
s += "\r\n屏幕分辨率的宽:"+ window.screen.width;
s += "\r\n屏幕可用工作区高度:"+ window.screen.availHeight;
s += "\r\n屏幕可用工作区宽度:"+ window.screen.availWidth;
s += "\r\n你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色";
s += "\r\n你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸";
alert(s);
</SCRIPT>

时间: 2024-12-15 06:59:07

关于对象的 width offsetwidth availWidth scrollHeight的相关文章

关于width,offsetwidth,scorllwidth

width:对象的宽度 offsetwidth :对象包括滚动条border的宽度,会随对象显示大小的变化而改变. scrollWidth:对象的宽度,会随着可视区大小改变 clientWidth是内容可视区的宽度. offsetLeft:对象包括border在内的边距.scrollHeight: 对象的滚动高度. scrollLeft:对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:对象的滚动宽度 of

CSSs width属性 和offsetwidth属性深入理解

本人菜鸟一枚,趁着奥运期间,一边看奥运,一边学习,最近在慕课网学习前端技术,学习过程中有向很多前辈们博客学习,现在就来分享我的学习所得. 慕课网,导航条菜单的制作,使用javascript去制作伸缩菜单(水平方向上),下面是学习过程中的一个小插曲: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content=&quo

event对象的clientX,offsetX,screenX,pageX和offsetTop,offsetHeight等等

先总结下区别: event.clientX.event.clientY 鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条.IE事件和标准事件都定义了这2个属性 event.pageX.event.pageY 类似于event.clientX.event.clientY,但它们使用的是文档坐标而非窗口坐标.这2个属性不是标准属性,但得到了广泛支持.IE事件中没有这2个属性. event.offsetX.event.offsetY 鼠标相对于事件源元素(srcEle

offsetWidth\offsetleft 等图文解释

网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offsetWidth (包括边线的宽);网页可见区域高: document.body.offsetHeight (包括边线的宽);网页正文全文宽: document.body.scrollWidth;网页正文全文高: document.body.scrollHeight;网页被卷去的高: document.b

JS:offsetWidth\offsetleft 等图文解释

网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offsetWidth (包括边线的宽);网页可见区域高: document.body.offsetHeight (包括边线的宽);网页正文全文宽: document.body.scrollWidth;网页正文全文高: document.body.scrollHeight;网页被卷去的高: document.b

JS:offsetWidth\offsetleft

网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offsetWidth (包括边线的宽);网页可见区域高: document.body.offsetHeight (包括边线的宽);网页正文全文宽: document.body.scrollWidth;网页正文全文高: document.body.scrollHeight;网页被卷去的高: document.b

JS中offsetwidth等图文解释

网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body.offsetWidth (包括边线的宽); 网页可见区域高: document.body.offsetHeight (包括边线的宽); 网页正文全文宽: document.body.scrollWidth; 网页正文全文高:document.body.scrollHeight; 网页被卷去的高: docum

js 宿主对象的属性和方法总结

(1)属性: //height,width; a=document.documentElement.clientHeight; //文档可视高度,由浏览器决定 b=document.documentElement.scrollHeight; //文档可滚动高度,由文档内容决定 c=document.body.clientHeight; //文档内容body体高度,由文档内容决定 d=document.documentElement.scrollTop; //文档滚动高度,由已移动高度决定 e=w

HTML: width,height

在进行前端页面开发时,width(width,offsetWidth,scrollWidth,clientWidth)height(height,offsetHeight,scrollHeight,clientHeight)是我们最容易搞混乱的 这里就特别记录一下: 1.offsetWidth width+padding+border) 当前对象的宽度. style.width也是当前对象的宽度(width+padding+border). 区别:1)style.width返回值除了数字外还带有