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: }
JavaScript中的*top、*left、*width、*Height详解的更多相关文章
- javascript中parentNode,childNodes,children的应用详解
本篇文章是对javascript中parentNode,childNodes,children的应用进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 "parentNode&qu ...
- JavaScript中的apply和call函数详解(转)
每个JavaScript函数都会有很多附属的(attached)方法,包括toString().call()以及apply().听起来,你是否会感到奇怪,一个函数可能会有属于它自己的方法,但是记住,J ...
- JavaScript中的apply和call函数详解
本文是翻译Function.apply and Function.call in JavaScript,希望对大家有所帮助 转自“http://www.jb51.net/article/52416.h ...
- JavaScript中的this的指代对象详解
在javascript里面,this是一个特殊的对象,它不像其他编程语言那样,是存储在实例中的值,直接指向此实例. 而是作为一个单独的指针,在不同的情况之下,指向不同的位置,这也是为什么我们会将它搞混 ...
- Javascript中的url编码与解码(详解)
摘要 本文主要针对URI编解码的相关问题做了介绍,对url编码中哪些字符需要编码.为什么需要编码做了详细的说明,并对比分析了Javascript中和编解码相关的几对函数escape / unescap ...
- JavaScript 中 Property 和 Attribute 的区别详解
property 和 attribute非常容易混淆,两个单词的中文翻译也都非常相近(property:属性,attribute:特性),但实际上,二者是不同的东西,属于不同的范畴. property ...
- JavaScript中数组Array.sort()排序方法详解
JavaScript中数组的sort()方法主要用于对数组的元素进行排序.其中,sort()方法有一个可选参数.但是,此参数必须是函数. 数组在调用sort()方法时,如果没有传参将按字母顺序(字符编 ...
- Javascript中的局部变量、全局变量的详解与var、let的使用区别
前言 Javascript中的变量定义方式有以下三种方式:1.直接定义变量,var与let均不写: a = 10; 2.使用var关键字定义变量 var a = 10; 3.使用let关键字定义变量 ...
- Javascript中while和do-while循环用法详解
while循环 while 语句与 if 语句相似,都有条件来控制语句(或语句块)的执行,其语言结构基本相同:while(conditions){ statements;} while 语句与 ...
- JavaScript中SetInterval与setTimeout的用法详解
setTimeout 描述 setTimeout(code,millisec) setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式. 注:调用过程中,可以使用clearTimeou ...
随机推荐
- 【Apache运维基础(1)】Apache的安装与使用
安装 yum -y install httpd httpd-devel # 在Ubuntu里面叫做Apache2,输入localhost能打开就算成功了 额...当然专业的运维还是老老实实的去编译吧; ...
- mysql建表时拆分出常用字段和不常用字段
一对一 一张表的一条记录一定只能与另外一张表的一条记录进行对应,反之亦然. 学生表:姓名,性别,年龄,身高,体重,籍贯,家庭住址,紧急联系人 其中姓名.性别.年龄.身高,体重属于常用数据,但是籍贯.住 ...
- Scanner演示
import java.util.Scanner; /** *Scanner演示 */ public class ScannerDemo{ public st ...
- REACTOS(193)与汇编编译器(69)的高人
REACTOS(193)与汇编编译器(69)的高人http://blog.csdn.net/caimouse ReactOS编译成VS工程1: 首先从https://www.reactos.org/w ...
- Filter设计实现IP地址限制
示例:创建一个IP过滤Filter,当一个用户发出访问请求的时候,首先通过过滤器进行判断, 如果用户的IP地址被限制,就禁止访问,只有合法的IP才可以继续访问.IP过滤Filter代码如下: IPFi ...
- 经典K线组合图解 > 正文
日K线波段中上下影线的箱体操作法(完整) http://video.sina.com.cn/v/b/130809461-2486130757.html!!经典K线组合图解 > 正文 http:/ ...
- fedora如何设置上网
设置方法如下:第一步:激活网卡.Fedora Linux系统装好后默认的网卡是eth0,用下面的命令将这块网卡激活.# ifconfig eth0 up.第二步:设置网卡进入系统时启动 .想要每次开机 ...
- IOS刷新数据
在一个项目开发过程中为了更好的体验经常会用到下拉刷新更新数据,当然也伴随一些上拉加载更多数据的情况:当前比较火的EGOTableViewPullRefresh只实现了下拉功能,而没有上拉的功能.这里介 ...
- 运行Android应用时提示ADB是否存在于指定路径问题
打开eclipse,选择指定的Android应用工程并Run,提示: [2014-06-28 11:32:26 - LinearLayout] The connectionto adb is down ...
- Android app Splash页的替代方案
一般的App想要显示公司的log什么的,都会在启动的第一个页面显示,就是SplashActivity. 目前在看到一个替代SplashActivity的方案. 使用SplashActivity的时候, ...