网页的位置编程

      网页做了这么久了，对与用javascript来操作网页的位置编程还是很陌生，因为以前总是抄点别人的程序，实现功能就可以，以后所有的 东西要全部自主知识产权了，无论如何自己也可以算得上是资深程序员了，呵呵。虽然技术不是很高，先查了一下msdn跟元素定位相关的属性和方法：

 

screenX Property：
              Sets or retrieves the x - coordinate of the mouse pointer ' s position relative to the user ' s screen. 

clientX Property

Sets or retrieves the x - coordinate of the mouse pointer ' s position relative to the client area of the window, excluding window decorations and scroll bars.Remarks

The property is read-only in Microsoft Internet Explorer 4.0, and read/write in Internet Explorer 5 and later.

Because the clientX property returns a value relative to the client, you can add the value of the scrollLeft property to determine the distance of the x-coordinate from the edge of the body element. 

Within a viewlink, the client area begins at the edge of the master element. 

offsetX Property

Sets or retrieves the x-coordinate of the mouse pointer ' s position relative to the object firing the event.

Remarks

The property is read - only  in  Microsoft Internet Explorer  4.0 , and read / write  in  Internet Explorer  5  and later.

The coordinates match the offsetLeft and offsetTop properties of the object. Use offsetParent to find the container object that defines  this  coordinate system. 

Example

This example uses the offsetX property to determine the mouse position relative to the container that fired the event, and displays the mouse coordinates  in  the status bar at the bottom of the window.

< SCRIPT >
function  offsetCoords()
{
     var  offsetInfo  =   ""
    offsetInfo  =   " The x coordinate is:  "   +  window.event.offsetX  +   " "
    offsetInfo  +=   " The y coordinate is:  "   +  window.event.offsetY  +   " "
    alert(offsetInfo);
}
</ SCRIPT >
</ HEAD >
< BODY onmousemove = " window.status = 'X=' + window.event.offsetX + 
    ' Y=' + window.event.offsetY "  ondblclick = " offsetCoords() " >
:
< DIV onclick = " offsetCoords(); "  . . . position:absolute; top: 200 ;
    left: 300 ; " >
:
</DIV>x PropertySets or retrieves the x-coordinate, in pixels, of the mouse pointer's position relative to a relatively positioned parent element.RemarksThe property is read-only in Microsoft Internet Explorer 4.0, and read/write in Internet Explorer 5 and later.In browser versions earlier than Internet Explorer 5, the x property retrieves a coordinate relative to the client.This property returns the x-coordinate of the closest relatively positioned parent element of the element that fires the event. If the event firing element is relatively positioned, then the x-coordinate from the boundary of the element is returned. If the event firing element and all of its parent elements are not relatively positioned, then the x property returns a coordinate relative to the body element.If the mouse is outside the window when the event is called, this property returns -1

 

 

pixelTop Property
Sets or retrieves the top position of the object. 

 

 

1 、获取屏幕的分辨率

  window.screen.Width   
  window.screen.Height

2 、用window.document.body对象时   
   offsetWidth、offsetHeight         IE工作区宽和高   
   clientWidth、clientHeight         IE可见区宽和高   
   scrollWidth、scrollHeight         IE水平滚动板宽度和垂直滚动板高度   
   
   screen.width、screen.height     屏幕的分辩率   
3 、
  用window.document.body对象时   
  offsetWidth、offsetHeight         IE工作区宽和高   
  clientWidth、clientHeight         IE可见区宽和高   
  scrollWidth、scrollHeight         IE水平滚动板宽度和垂直滚动板高度  
    
  screen.width、screen.height     屏幕的分辩率   
4 、top的值是String   
   pixelTop的值是Integer

5 、left   (x),top   (y)是带单位的值，pixelLeft,pixelTop是不带单位的值   
    
  屏幕的分辩率(单位是pixel):   
  screen.width   
  screen.height   
    
  screen.availWidth,   screen.availHeight是指除去TASKBAR以外的长宽   
    
6 、 pixeltop是相对于父层的   

 

编程示例：

环境元素：页面中有一个输入框，本段代码通过没有该层存在而重新创建一个div元素然后附加到body中然后在去计算他的显示位置，通过循环计算父元素的offsetleft 和offsetTop来确定．

if  ( ! document.getElementById(divID))
        {
             var  newNode  =  document.createElement( " div " );
            newNode.setAttribute( " id " , divID);
            document.body.appendChild(newNode);
        }

         //  globalDiv设置为div的引用        
        globalDiv  =  document.getElementById(divID);

         //  计算div左上角的位置        
         var  x  =  queryField.offsetLeft;
         var  y  =  queryField.offsetTop  +  queryField.offsetHeight;
         var  parent  =  queryField;
         while  (parent.offsetParent)
        {
            parent  =  parent.offsetParent;
            x  +=  parent.offsetLeft;
            y  +=  parent.offsetTop;
        }

         //  如果没有对div设置格式,则为其设置相应的显示样式        
         if  ( ! divFormatted)
        {
            globalDiv.style.backgroundColor  =  DIV_BG_COLOR;
            globalDiv.style.fontFamily  =  DIV_FONT;
            globalDiv.style.padding  =  DIV_PADDING;
            globalDiv.style.border  =  DIV_BORDER;
            globalDiv.style.width  =   " 100px " ;
            globalDiv.style.fontSize  =   " 90% " ;

            globalDiv.style.position  =   " absolute " ;
            globalDiv.style.left  =  x  +   " px " ;
            globalDiv.style.top  =  y  +   " px " ;
            globalDiv.style.visibility  =   " hidden " ;
            globalDiv.style.zIndex  =   10000 ;

            divFormatted  =   true ;
        }

 

clientHeight:内容可视区域的高度
 offsetHeight:clientHeight + 滚动条 + 边框
 scrollHeight:网页内容实际高度，可以小于 clientHeight
 offsetParent:在msdn的解释是Retrieves a reference to the container object that defines the offsetTop and offsetLeft properties of the object.
 parentElement: 在msdn的解释是Retrieves the parent object in the object hierarchy.
 offsetLeft:

 假设 obj 为某个 HTML 控件。

 obj.offsetTop 指 obj 距离上方或上层控件的位置，整型，单位像素。

 obj.offsetLeft 指 obj 距离左方或上层控件的位置，整型，单位像素。

 obj.offsetWidth 指 obj 控件自身的宽度，整型，单位像素。

 obj.offsetHeight 指 obj 控件自身的高度，整型，单位像素。


 clientHeight   获取对象的高度，不计算任何边距、边框、滚动条，但包括该对象的补白。     
  clientLeft   获取   offsetLeft   属性和客户区域的实际左边之间的距离。     
  clientTop   获取   offsetTop   属性和客户区域的实际顶端之间的距离。     
  clientWidth   获取对象的宽度，不计算任何边距、边框、滚动条，但包括该对象的补白。     
  offsetHeight   获取对象相对于版面或由父坐标   offsetParent   属性指定的父坐标的高度。     
  offsetLeft   获取对象相对于版面或由   offsetParent   属性指定的父坐标的计算左侧位置。     
  offsetParent   获取定义对象   offsetTop   和   offsetLeft   属性的容器对象的引用。     
  offsetTop   获取对象相对于版面或由   offsetTop   属性指定的父坐标的计算顶端位置。     
  offsetWidth   获取对象相对于版面或由父坐标   offsetParent   属性指定的父坐标的宽度。     
  offsetX   设置或获取鼠标指针位置相对于触发事件的对象的   x   坐标。     
  offsetY   设置或获取鼠标指针位置相对于触发事件的对象的   y   坐标。

offsetParent直接的将是影响元素位置的上级element，而parentElement与位置显示无关时dom中的上级element。
例如：
  <BODY>
  <div   style="border:   1px   solid   black;position:absolute;"> 
  <form> 
  <input   type="checkbox"   id="cc"> 
  </form> 
  </div> 
这个例子中，“cc”元素的offsetParent是div，如果去掉div的position属性，那么cc的offsetParent就会变为body。而parentElement一直都为form。
与此相关的还有offsetLeft和offsetTop两种属性，他们分别表示的是元素与offsetElement相对应的左侧和顶部距离。 

 

parentNode和parentElement功能一样，childNodes和children功能一样。但是parentNode和childNodes是符合W3C标准的，可以说比较通用。而另外两个只是IE支持，不是标准，Firefox就不支持