这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
制作网页的过程中,你有时候需要知道某个元素在网页上的确切位置。下面的教程总结了 Javascript 在网页定位方面的相关知识。有需要的小伙伴可以参考下。
元素的位置是以像素度量的,向右代表 X 坐标的增加,向下代表 Y 坐标的增加,但是,有两个不同的点作为坐标系的原点:元素的 X 和 Y 坐标可以相对于文档的左上角或者相对于在职中显示文档的视口的左上角。
在定级窗口和标签页中,"视口" 只是实际显示文档内容的浏览器的一部分:它不包括浏览器的 "外壳"(如菜单、工具条和标签页)。
针对框架也中显示的文档,是口试定了框架页的 <iframe> 元素。无论在何种情况下,当讨论元素的位置是,必须弄清楚所使用的坐标是文档坐标还是视口坐标。(注意,视口坐标有事也叫作窗口坐标)
如果文档比视口要小,或者说还未出现滚动,则文档的左上角就是视口的左上角,文档和视口坐标系统是同一个。但是一般来说,要在两种坐标系之间互相转换,必须加上或减去滚动的偏移量(scroll offset)。例如,在文档坐标中如果一个元素的 Y 坐标是 200 像素,并且用户已经把浏览器向下滚动了 75 像素,那么视口坐标中元素的 Y 坐标就是 125 像素。同样,在视口坐标中如果一个元素的 X 坐标是 400 像素,并且用户已经水平滚动了视口 200 像素,那么文档坐标中像素的 X 坐标中元素的 X 坐标就是 600 像素。
文档坐标比视口坐标更加基础,并且在用户滚动是他们不会发生变化。不过,在客户端编程中使用视口坐标是非常常见的。当使用 CSS 指定元素的位置时运用了文档坐标。但是最简单的查询元素位置的方法:getBoundingClientRect() 返回视口坐标中的位置。类似的,当为鼠标事件注册事件处理程序函数时,报告的鼠标指针的坐标是在视口坐标系中。
为了在坐标系中转换,我们需要判定浏览器窗口的滚动条的位置。Window 对象的 pageXoffset 和 pageYOffset 属性在所有的浏览器中提供这些值,除了 IE8 及更早的版本以外。IE(和所有现代浏览器)也可以通过 scrollLeft 和 scrollTop 属性来获得滚动条的位置。令人迷惑的是,正常的情况下通过查找文档的根节点(document.documentElement)来获取这些属性,但是在怪异模式下,必须在文档的元素(documeng.body)上查询它们。以下显示了如何简便的查询滚动条的位置。
- functon getScrollOffsets(w) {
- w = w || window;
- var sLeft, sTop;
- if (w.pageXOffset != null) {
- sLeft = w.pageXOffset;
- sTop = w.pageYOffset;
- return {
- x: sLeft,
- y: sTop
- };
- }
- if (document.compatMode == "CSS1Compat") {
- sLeft = document.documentElement.scrollLeft == 0 ? document.body.scrollLeft: document.documentElement.scrollLeft;
- sTop = document.documentElement.scrollTop == 0 ? document.body.scrollTop: document.documentElement.scrollTop;
- return {
- x: sLeft,
- y: sTop
- };
- } else if (document.compatMode == "BackCompat") {
- sLeft = document.body.scrollLeft;
- sTop = document.body.scrollTop;
- return {
- x: sLeft,
- y: sTop
- };
- }
- }
有时候能够判定视口的尺寸也是非常有用的,例如,为了确定文档的案部分是当前可见的。利用滚动偏移量查询视口的尺寸的简单方法在 IE8 及更早版本中无法工作,而且该技术在 IE 中的运行法师还要取决于浏览器是否处于怪异模式还是标准模式。
window 下的属性:
innerHeight: 包括滚动条在内的窗口内容部分的高度
innerWidth: 包括滚动条在内的窗口内容部分的宽度
outerHeight: 整个浏览器的高度,包括界面所有组成部分。
outerWidth: 整个浏览器的宽度,包括界面所有组成部分。
pageXOffset: 浏览器窗口的滚动条 X 轴的位置
pageYOffset: 浏览器窗口的滚动条 Y 轴的位置
scrollX: 浏览器窗口的滚动条 X 轴的位置
scrollY: 浏览器窗口的滚动条 Y 轴的位置
属性
document.documentElement document.body clientHeight 视口内可见内容的大小,不包括滚动的部分和滚动条。 clientWidth clientLeft clientTop offsetHeight 内容大小,并且包括滚动条。 offsetWidth offsetLeft offsetTop scrollHeight 滚动内容的大小,包括滚动的部分, 但不包括滚动条。 scrollWidth scrollTop scrollWidth
查询窗口的视口尺寸:
- function getViewportSize(w) {w = w || window;
- var cWidth, cHeight;
- if (w.innerWidth != null) {cWidth = w.innerWidht;cHeight = w.innerHeight;
- return {
- w: cWidth,
- h: w.cHeight
- };
- }
- if (document.compatMode == "CSS1Compat") {cWidth = document.documentElement.clientWidth;cHeight = doument.documentElement.clientHeight;
- return {
- w: cWidth,
- h: w.cHeight
- };
- } else if (document.compatMode == "BackCompat") {cWidth = document.body.clientWidth;cHeight = doument.body.clientHeight;
- return {
- w: cWidth,
- h: w.cHeight
- };
- }
- }
来源: http://www.phperz.com/article/17/0415/271195.html