首页 > 代码库 > JavaScript中的*top、*left、*width、*Height详解
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 = http://www.mamicode.com/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: }
ps:浏览器对盒子的解析存在差异,所以以上得出的数据也会存在小小差异。附图一张
演示地址:http://ido321.qiniudn.com/test.html
关于获取视窗大小的区别:http://www.ido321.com/906.html
JavaScript中的*top、*left、*width、*Height详解
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。