JavaScript中的*top、*left、*width、*Height具体解释
来源：http://www.ido321.com/911.html
html代码
1: <body>
2: <div class="father" id="father">
3: <h3>这是父元素，屏幕分辨率是1366*768</h3>
4: <div class="son" id="son">
5: <h3>这是子元素，祝大家国庆快乐 </h3>
6: <div class="grandson" id="grandson">
7: <h3>这是孙子元素，祝大家国庆快乐 </h3>
8: <h3>我的博客:www.ido321.com</h3>
9: <h3>程序爱好者QQ群:</h3>
10: <h3>259280570 </h3>
11: <h3>欢迎你增加 </h3>
12: <h3>国庆快乐 </h3>
13: </div>
14: </div>
15: </div>
16: <div class="data">
17: <h3>数据输出</h3>
18: <div id="data"></div>
19: </div>
20: </body>
css
1: *
2: {
3: margin: 0 auto;
4: }
5: .father
6: {
7: width: 500px;
8: height: 750px;
9: border: 5px solid red;
10: float: left;
11: }
12: .son
13: {
14: width: 400px;
15: height: 300px;
16: border: 5px solid black;
17: margin: 20px;
18: }
19: .grandson
20: {
21: width: 150px;
22: height: 100px;
23: border: 5px solid blue;
24: margin: 20px;
25: overflow: auto;
26: }
27: .data
28: {
29: width: 600px;
30: height: 750px;
31: border: 5px solid red;
32: float: left;
33: margin-left: 15px;
34: }
js:
1: window.onload = function()
2: {
3: /*获取元素对象*/
4: var father = document.getElementById('father');
5: var son = document.getElementById('son');
6: var grandson = document.getElementById('grandson');
7: var data = document.getElementById('data');
8: data.innerHTML = "<h3>获取视窗大小(跟窗体大小有关)</h3>";
9: data.innerHTML += "document.body可见区域宽: "+document.body.clientWidth+"<br/>";
10: data.innerHTML += "document.body可见区域高: "+document.body.clientHeight+"<br/>";
11: data.innerHTML += "window.innerWidth可见区域宽: "+window.innerWidth+"<br/>";
12: data.innerHTML += "window.innerHeight可见区域高: "+window.innerHeight+"<br/>";
13: data.innerHTML += "document.documentElement可见区域宽: "+document.documentElement.clientWidth+"<br/>";
14: data.innerHTML += "document.documentElement可见区域高: "+document.documentElement.clientHeight+"<br/>";
15: data.innerHTML += "<h3>获取元素自身大小(跟是否有滚动栏无关)</h3>";
16: data.innerHTML += ".son自身宽度(offsetWidth属性，包含左右边框)："+son.offsetWidth+"<br/>";
17: data.innerHTML += ".son自身高度(offsetHeight属性，包含上下边框)："+son.offsetHeight+"<br/>";
18: data.innerHTML += ".son可视宽度(clientWidth属性。不包含左右边框)："+son.clientWidth+"<br/>";
19: data.innerHTML += ".son可视高度(clientHeight属性。不包含上下边框)："+son.clientHeight+"<br/>";
20: data.innerHTML += "<h3>获取.grandson滚动大小和可视大小</h3>";
21: data.innerHTML += ".grandson滚动宽度(scrollWidth属性)："+grandson.scrollWidth+"<br/>";
22: data.innerHTML += ".grandson滚动高度(scrollHeight属性)："+grandson.scrollHeight+"<br/>";
23: data.innerHTML += ".grandson可视宽度(clientWidth属性，不包含竖直滚动栏和border)："+grandson.clientWidth+"<br/>";
24: data.innerHTML += ".grandson可视高度(clientHeight属性，不包含水平滚动栏和border)："+grandson.clientHeight+"<br/>";
25: data.innerHTML += "<h3>获取.grandson被卷去的大小(跟滚动栏的位置有关)</h3>";
26: data.innerHTML += ".grandson被卷去的高(scrollTop属性，竖直滚动栏滑到最底端)："+grandson.scrollTop+"<br/>";
27: data.innerHTML += ".grandson被卷去的左(scrollLeft属性，水平滚动栏滑到最右端)："+grandson.scrollLeft+"<br/>";
28: data.innerHTML += "<h3>获取浏览器窗体位置(跟窗体大小有关)</h3>";
29: /*
30: *IE、Chrome、Safari、Opera 都提供了支持 window.screenLeft 和 *window.screenTop。可是Firxfox不支持这个两个属性。
31: *Firxfox、Chrome、Safari、Opera 都提供了支持 window.screenX *和 window.screenY，可是 IE 不支持这个两个属性。
32: */
33: var leftPos = (typeof window.screenLeft == 'number')?window.screenLeft:window.screenX;
34: var topPos = (typeof window.screenTop == 'number')?window.screenTop:window.screenY;
35: data.innerHTML += "body网页正文部分上(window.screenTop(Y))："+ topPos+"<br/>";
36: data.innerHTML += "body网页正文部分左(window.screenLeft(X))："+ leftPos+"<br/>";
37: data.innerHTML += "<h3>获取屏幕分辨率</h3>";
38: data.innerHTML += "屏幕分辨率的高(window.screen.height)："+ window.screen.height+"<br/>";
39: data.innerHTML += "屏幕分辨率的宽(window.screen.width)："+ window.screen.width+"<br/>";
40: data.innerHTML += "<h3>获取屏幕可用的高宽</h3>";
41: data.innerHTML += "屏幕分辨率的高(window.screen.availHeight)："+ window.screen.availHeight+"<br/>";
42: data.innerHTML += "屏幕分辨率的宽(window.screen.availWidth)："+ window.screen.availWidth+"<br/>";
43: data.innerHTML += "<h3>获取.father的边框大小</h3>";
44: data.innerHTML += ".father上边框(clientTop)："+ father.clientTop+"<br/>";
45: data.innerHTML += ".father左边框(clientLeft)："+ father.clientLeft+"<br/>";
46: data.innerHTML += "<h3>获取.son到父元素边界的距离(即相应margin+父元素相应的border)</h3>";
47: data.innerHTML += ".son到父元素上边界(offsetTop)："+ son.offsetTop+"<br/>";
48: data.innerHTML += ".son到父元素左边界(offsetLeft)："+ son.offsetLeft+"<br/>";
49: }
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMTA0Mzg0Mw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">
JavaScript中的*top、*left、*width、*Height具体解释的更多相关文章
- 关于javascript中静态成员和实例成员的详细解释
关于javascript中静态成员和实例成员的详细解释 在我们了解什么是静态成员和实例成员之前,我们首先来了解一下什么是实例? 实例就是由构造函数创建出来的对象. 例如案例中 p 就是实例: fun ...
- JavaScript中的*top、*left、*width、*Height详解
来源:http://www.ido321.com/911.html html代码 1: <body> 2: <div class="father" id=&quo ...
- RelativeLayout-代码中成员控件width height
今天需要在代码中动态的设置一个textview的width跟height属性,记录下来. textview在xml中的布局如下 <RelativeLayout android:layout_wi ...
- Javascript中关于作用域和闭包和域解释的面试题
<script type="text/javascript"> function fn() { var i = 10; return function (n) { co ...
- offset[Parent/Width/Height/Top/Left] 、 client[Width/Height/Top/Left] 、 Element.getBoundingClientRect()
开篇提示:以下内容都经个人测试,参考API文档总结,但还是不能保证完全正确,若有错误,还请留言指出___________________________________________________ ...
- javascript中top、clientTop、scrollTop、offsetTop的讲解(转载加总结)
scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最 ...
- delphi 窗体的位置和高宽度-TForm:Letf、Top、Width、Height、ClientWidth、ClientHeight
delphi 窗体的位置和高宽度-TForm:Letf.Top.Width.Height.ClientWidth.ClientHeight [窗体的高度和宽度]: [客户区的高度和宽度]: [窗体在屏 ...
- JavaScript中 window.parent 、window.top、window.self代表的含义
在应用有frameset或者iframe的页面时,parent是父窗口,top是最顶级父窗口(有的窗口中套了好几层frameset或者iframe),self是当前窗口, opener是用open方法 ...
- client/scroll/offset width/height/top/left ---记第一篇博客
client/scroll/offset width/height/top/left (盒模型为contentBox,定位原点是元素左上角边框最外层的交点) clientWidth width+左p ...
随机推荐
- Ubuntu14.04下安装和"激活"Office2010ProPlus与Visio2010(15.11.20Updated)
本人用Ubuntu的时候全然没有打游戏的欲望,故而能够更高效的工作. 尽管说LibreOffice.WPS等等有Ubuntu版本号,可是用着还是没有微软的Office顺手,故而折腾了一下怎样安装Off ...
- 移动端web app开发备忘
近期要做个手机html5的页面,做些知识储备,重要的点记录下来以备兴许. 1.devicePixelRatio:定义设备物理象素和设备独立象素的比例.css中的px能够看作是设备的独立象素.通过dev ...
- 使用ThoughtWorks.QRCode生成二维码
新建Windows应用程序,加入引用ThoughtWorks.QRCode.dll,编写代码生成二维码. using System; using System.Drawing; using Syste ...
- windows開始菜单和任务栏图标显示空白而且点击时候显示项目已被移动或删除
这几天实验室老常常自己主动断电.这是非常蛋疼的一件事,这不上次断电就出事了.来电后开机,点击任务栏上的程序全都显示为无法打开此项目,该项目已被移动.删除.原因是图标缓存丢失,可能是突然断电引起的,也有 ...
- 杭电1425 sort
Problem Description 给你n个整数.请按从大到小的顺序输出当中前m大的数. Input 每组測试数据有两行,第一行有两个数n,m(0<n,m<1000000).第二行 ...
- linux设备驱动归纳总结（三）：4.ioctl的实现
linux设备驱动归纳总结(三):4.ioctl的实现 一.ioctl的简单介绍: 尽管在文件操作结构体"struct file_operations"中有非常多相应的设备操作函数 ...
- BZOJ 4034 线段树+DFS序
思路: 先搞出来每个点的DFS序 (要有入栈和出栈两种状态的) 处理出来 线段树区间有多少入栈的和多少出栈的 加区间的时候就加(入-出)*wei 查前缀和 //By SiriusRen #includ ...
- C++实现矩阵求逆
最近实现一个算法要用到求逆等矩阵运算,在网上搜到一个别人写的矩阵类,试了一下效果不错,贴在这里,做个保存. matrix.h文件: #ifndef __MATRIX_H__ #define __MAT ...
- visual studio 添加库文件
我在visual studio中使用OpenGL时需要添加额外的库 一 首先下载库文件,里面将会有一些.h文件和.lib文件,打开visual studio安装目录下打开: D:\program\VS ...
- 基于Pipe的PureMVC FLEX框架的多核共享消息技术
pipes utilities,也就是所谓的通道(管道),为什么要使用通道呢?模块的结构都是一个单独的puremvc结构,模块和模块,shell和模块之间的通信 不能使用puremvc中的消息进行,因 ...