山上山下风展红旗如画:Measuring Element Dimension and Location-网页元素定位

网页可见区域宽：document.body.clientWidth
网页可见区域高：document.body.clientHeight
网页可见区域宽：document.body.offsetWidth (包括边线的宽)
网页可见区域高：document.body.offsetHeight (包括边线的宽)
网页正文全文宽：document.body.scrollWidth
网页正文全文高：document.body.scrollHeight
网页被卷去的高：document.body.scrollTop
网页被卷去的左：document.body.scrollLeft
网页正文部分上：window.screenTop
网页正文部分左：window.screenLeft
屏幕分辨率的高：window.screen.height
屏幕分辨率的宽：window.screen.width
屏幕可用工作区高度：window.screen.availHeight
屏幕可用工作区宽度：window.screen.availWidth 

object.scrollIntoView( [bAlignToTop])

Parameters

bAlignToTopOptional. Boolean that specifies one of the following values: trueDefault. Scrolls the object so that top of the object is visible at the top of the window.falseScrolls the object so that the bottom of the object is visible at the bottom of the window.

Return Value

No return value.

Remarks

The scrollIntoView method is useful for immediately showing the user the result of some action without requiring the user to manually scroll through the document to find the result.

Depending on the size of the given object and the current window, this method might not be able to put the item at the very top or very bottom, but will position the object as close to the requested position as possible.

Example

This example uses the scrollIntoView method to underline the content of the document's fifth paragraph and scroll it into view at the top of the window.

HideExample

   var coll = document.all.tags("P");if (coll.length >= 5){coll(4).style.textDecoration = "underline";coll(4).scrollIntoView(true);}

Standards Information

There is no public standard that applies to this method.

Applies To

INPUT type=ra...PlatformVersionWin16:4.0Win32:4.0Windows CE:4.0Unix:4.0Mac:4.0Version data is listed when the mouse hovers over a link, or the link has focus.A, ADDRESS, APPLET, AREA, B, BIG, BLOCKQUOTE, BR, BUTTON, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, COMMENT, controlRange, CUSTOM, DD, DFN, DIR, DIV, DL, DT, EM, EMBED, FIELDSET, FONT, FORM, hn, HR, I, IFRAME, IMG, INPUT type=button, INPUT type=checkbox, INPUT type=file, INPUT type=image, INPUT type=password, INPUT type=radio, INPUT type=reset, INPUT type=submit, INPUT type=text, KBD, LABEL, LEGEND, LI, LISTING, MAP, MARQUEE, MENU, NOBR, OBJECT, OL, P, PLAINTEXT, PRE, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TextRange, TFOOT, TH, THEAD, TR, TT, U, UL, VAR, WBR, XMPMove the mouse pointer over an element in the Applies To list to display availability information for the listed platforms.

不经意的时候看到QQ邮箱收到附件的时候，有一个效果，如下图所示：

比较好奇的就抓了一下节点，然后看了一下源代码，主要使用了这样一个函数：scrollIntoView

scrollIntoView 看到这个函数名的时候，其实也能联想到它的作用(功能)，将一个对象显示在当前window窗口的可视范围之内。

这个是W3C定义的DOM方法，各浏览器均支持，包括：IE5.5+、FF2.0+....

可以到PPK的博客中查看更详细的介绍：http://www.quirksmode.org/dom/w3c_cssom.html

可以点击链接查看Demo:http://www.quirksmode.org/dom/tests/scrollintoview.html

不过上面并未介绍它的参数，具体参数说明可以看这里：

http://msdn.microsoft.com/en-us/library/ms536730(VS.85).aspx

语法：

object.scrollIntoView( [bAlignToTop])

参数：

bAlignToTop 布尔型：true/false，默认参数不传则为true

它们分别代表不同的含义。

true:如果滚动条足够长，则将对象的顶端与当前窗口的顶部对齐，如下图：

false:对象的底端与当前窗口的顶端对齐，如下图：

而要实现闪烁的效果则是使用装饰的特性：延时执行函数，切换对象的样式 70毫秒切换一次，上面的效果总花切换了4次（调用了4次函数）。

Demo的源码（拷贝时请注意编码，我使用的是utf-8）：

可以点击我试试!

  
    附件
   (1 个)

  

    普通附件
   

(已通过卡巴斯基杀毒引擎扫描)

  

  

   

    
     
    
   

   

     ecomstore.tar (1.46M)
    

      下载  
      打开  
      在线预览  
      保存到我的随身盘
    

   

  

  

使用scrollIntoView:true

The following section is designed to help Web authors understand how to access the dimension and location of elements on the page through the Dynamic HTML (DHTML) Object Model.

Understanding Properties That Measure Element Dimension and Location
The following diagram of a sample page shows the DHTML Object Model properties that are related to the dimension and location of elements. The sample page contains a div element that is relatively positioned on the page. Since the overflow attribute of the div has been set to scroll and it contains more content than can be displayed within its limited client area, scroll bars are displayed.