【javascript位置属性】window对象
2011-12-03 13:19
330 查看
对于javascript中各种位置属性,之前在写特效时是需要什么就用什么,还没有认认真真的系统的去总结下。在很多特效中位置属性起着举足轻重的作用。如果浏览器对每种属性的解释都相同,我们也不用浪费太多的精力,因为对于每一种属性,不同的浏览器有着不同的解释。
这篇文章涵盖了目前各种主流对象的各种位置的属性,如果有什么错误的地方或者遗漏的地方请不要吝惜你的文字。
总结这些属性,也算是对自己有个交代。
window对象
innerHeight
innerWidth
outerHtight
outerWidth
pageXOffset
pageXOffset
screenLeft
screenTop
screenX
ScreenY
[b]innerHeight innerWidth[/b]
浏览器兼容性:
实例代码:【注意在FF中测试】
效果实现:
[b]outerHeight outerWidth[/b]
代码实现:【在FF中测试】
效果实现:
[b]pageXOffset pageYOffset[/b]
IE不支持这些属性,IE使用document.dacumentElement或document.body的scrollLeft和scrollTop属性。
浏览器兼容性:
实例代码:
效果实例:
[b]screenTop screenLeft screenX screenY[/b]
浏览器兼容性:
screenTop screenLeft
screenX screenY
实例代码:
效果实例:
在Chrom中测试:
在FF中测试:
这篇文章涵盖了目前各种主流对象的各种位置的属性,如果有什么错误的地方或者遗漏的地方请不要吝惜你的文字。
总结这些属性,也算是对自己有个交代。
window对象
innerHeight
innerWidth
outerHtight
outerWidth
pageXOffset
pageXOffset
screenLeft
screenTop
screenX
ScreenY
[b]innerHeight innerWidth[/b]
innerHeight | 返回窗口的文档显示区的高度 |
innerWidth | 返回窗口的文档县市区的宽度 |
实例代码:【注意在FF中测试】
<html> <head> <script type="text/javascript"> function openWin() { myWindow=window.open('','','top=0,left=0'); myWindow.innerHeight="200"; myWindow.innerWidth="200"; myWindow.document.write("<p>This is 'myWindow'</p>"); myWindow.focus(); } </script> </head> <body> <input type="button" value="Open 'myWindow'" onclick="openWin()" /> </body> </html>
效果实现:
[b]outerHeight outerWidth[/b]
outerHeight | 返回窗口的外部高度,包括工具栏和滚动条 |
outerWidth | 返回窗口的外部宽度,包括工具栏和滚动条 |
浏览器兼容性:
代码实现:【在FF中测试】
<html> <head> <script type="text/javascript"> function openWin() { myWindow=window.open('',''); myWindow.outerHeight="200"; myWindow.outerWidth="200"; myWindow.document.write("<p>This is 'myWindow'</p>"); myWindow.focus(); } </script> </head> <body> <input type="button" value="Open 'myWindow'" onclick="openWin()" /> </body> </html>
效果实现:
[b]pageXOffset pageYOffset[/b]
pageXOffset | 声明当前文档向右滚动过的像素数 |
pageYOffset | 声明当前文档向下滚动过的像素数 |
浏览器兼容性:
实例代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <meta http-equiv="content-type" content="text/html;charset=UTF-8"/> </head> <body> <script type="text/javascript"> function set(){ window.scrollBy(100,100); alert("pageXOffset: " + window.pageXOffset + ", pageYOffset: " + window.pageYOffset); return true; } </script> <input type="button" value="click" onclick="set()"/> 1 <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 1111111111111111111111111111111111111111111111111111111111111111111111111111111111
1111111111111111111111111111111111111111111111111111111111
11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 2 <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> </body> </html>
效果实例:
[b]screenTop screenLeft screenX screenY[/b]
screenTop | 只读整数,声明窗口的左上角的Y坐标 |
screenLeft | 只读整数,声明窗口的左上角的X坐标 |
screenX | 只读整数,声明窗口的左上角的X坐标 |
screenY | 只读整数,声明窗口的左上角的Y坐标 |
screenTop screenLeft
screenX screenY
实例代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <meta http-equiv="content-type" content="text/html;charset=UTF-8"/> </head> <body> <script type="text/javascript"> function test(){ if(window.screenTop){ alert(screenLeft+"::"+screenTop); }else if(window.screenX){ alert(screenX+"::"+screenY); }else alert("this is a joke"); } </script> <input type="button" value="click" onclick="test()"/> </body> </html>
效果实例:
在Chrom中测试:
在FF中测试:
相关文章推荐
- 进一步认识Javascript中window对象的方法和属性以及重写alert方法,控制弹出窗口,frames[]数组
- document.body ,window.screen javascript对象属性取值意义
- JavaScript中Window对象的属性及事件
- javascript window对象属性
- javascript全局变量都是window对象的属性
- document.body ,window.screen javascript对象属性取值意义
- JavaScript中Window对象的属性及事件
- JavaScript之event对象位置属性图解
- [转载 js]document.body ,window.screen javascript对象属性取值意义
- javascript window对象属性整理
- javascript中关于window对象属性的全面介绍
- 【javascript位置属性】screen对象
- [转载 js]document.body ,window.screen javascript对象属性取值意义
- JavaScript 中的window.event代表的是事件的状态,jquery事件对象属性,jquery中如何使用event.target
- 33-JavaScript-DOM-window对象常用方法2-属性
- javascript基础:window对象的screen属性、移动窗口、缩放窗口
- javaScript写水印js过程中window对象的属性丢失问题
- JavaScript高级程序设计之BOM之window 对象之窗口位置第8.1.3讲笔记
- javaScript中window对象的方法和属性
- javascript window对象属性整理