转自:http://blog.csdn.net/smartview/archive/2009/02/13/3887669.aspx
scrollLeft,scrollWidth,clientWidth,offsetWidth到底指的哪到哪的距离之完全详解
<script type="text/javascript"></script>
HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth到底指的哪到哪的距离之完全详解
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量
以上主要指IE之中,FireFox差异如下:
IE6.0、FF1.06+:
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5:
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height
(需要提一下:CSS中的margin属性,与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)
下面是一个横向滚动应用:
- <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
<htmlxmlns="http://www.w3.org/1999/xhtml">
- <head>
-
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
- <title>无标题文档</title>
- </head>
- <body>
-
<divid="marquee_demo"style="overflow:auto;width:500px;text-align:center;border:1pxsolid#ccc">
-
<tablecellspacing="0"cellpadding="3"align="center"border="0">
- <tr>
-
<tdid="marquee_product1"valign="top">
-
<tablewidth="800"height="100"border="0"cellpadding="0"cellspacing="0">
- <tr>
-
<tdwidth="180"align="center"style="padding:3px15px3px15px;"mce_style="padding:3px15px3px15px;">1</td>
-
<tdwidth="180"align="center"style="padding:3px15px3px15px;"mce_style="padding:3px15px3px15px;">2</td>
-
<tdwidth="180"align="center"style="padding:3px15px3px15px;"mce_style="padding:3px15px3px15px;">3</td>
-
<tdwidth="180"align="center"style="padding:3px15px3px15px;"mce_style="padding:3px15px3px15px;">4</td>
-
<tdwidth="180"align="center"style="padding:3px15px3px15px;"mce_style="padding:3px15px3px15px;">5</td>
-
<tdwidth="180"align="center"style="padding:3px15px3px15px;"mce_style="padding:3px15px3px15px;">6</td>
-
<tdwidth="180"align="center"style="padding:3px15px3px15px;"mce_style="padding:3px15px3px15px;">7</td>
-
<tdwidth="180"align="center"style="padding:3px15px3px15px;"mce_style="padding:3px15px3px15px;">8</td>
- </tr>
- </table>
- </td>
-
<tdid="marquee_product2"valign="top"></td>
- </tr>
- </table>
- </div>
-
<mce:scripttype="text/javascript"><!--
-
-
varspeed=30;
-
document.getElementById("marquee_demo").scrollLeft=0;
-
-
-
-
document.getElementById("marquee_product2").innerHTML=document.getElementById("marquee_product1").innerHTML;
-
-
functionMarquee(){
-
if(document.getElementById("marquee_demo").scrollLeft>=document.getElementById("marquee_product1").scrollWidth){
-
document.getElementById("marquee_demo").scrollLeft=0;
- }
-
else{
-
document.getElementById("marquee_demo").scrollLeft++;
- }
- }
-
varMyMar=setInterval(Marquee,speed);
-
document.getElementById("marquee_demo").onmouseover=function(){clearInterval(MyMar);}
-
document.getElementById("marquee_demo").onmouseout=function(){MyMar=setInterval(Marquee,speed);}
-
- </body>
- </html>
分享到:
相关推荐
JavaScript属性scrollLeft,scrollWidth,clientWidth,offsetWidth之完全详解
HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth完全详解
javascript scrollLeft,scrollWidth,clientWidth,offsetWidth 完全详解,实例修正版。
图示offsetWidth、clientWidth、scrollWidth、scrollTop、scrollLeft等属性,对于一些页面的控制很有帮助。
网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body.offsetWidth (包括边线的宽); 网页可见区域高: document.body.offsetHeight (包括...
scrollLeft,scrollWidth,clientWidth,offsetWidth完全详解 2009年12月14日,16:58:19 | ArthurXF scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的...
有时候项目中会用到用js获取元素位置来定位元素,首先通过图片说明scrollWidth,clientWidth,offsetWidth的关系。 JS获取各种宽度、高度的简单介绍: scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取...
网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页可见区域高:document.body.offsetHeight (包括边线的宽) ...
网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页可见区域高:document.body.offsetHeight (包括边线的宽) ...
网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页可见区域高:document.body.offsetHeight (包括边线的宽) ...
网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页可见区域高:document.body.offsetHeight (包括边线的宽) ...
网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页可见区域高:document.body.offsetHeight (包括边线的宽) ...
网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页可见区域高:document.body.offsetHeight (包括边线的宽) ...
网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offsetWidth (包括边线的宽);网页可见区域高: document.body.offsetHeight (包括边线...
scrW = document.body.scrollWidth; scrH = document.body.scrollHeight; } else if(document.body) { // IE Mac scrW = document.body.offsetWidth; scrH = document.body.offsetHeight; } var...
在书中看到记下来,分享给需要的小伙伴。主要是以下几个属性: ... 第三组:scrollWidth,scrollHeight,scrollLeft,scrollTop 详细定义如下: 1.1 HTML元素的offsetWidth,offsetHeight以CSS像素返回
在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果...offsetWidth clientWidth scrollWidth offsetHeight clientHeight scrollHeight offsetLeft clientLeft scrollLeft offsetTop clientT
在ie6中很多js脚本执行就会出现问题,一般是在获取clientWidth, clientHeight,offsetWidth, offsetHeight,scrollWidth, scrollHeight,scrollTop, scrollLeft会返回不正确的值。 因为在加了doctype后,在ie6中...
网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: document.body.offsetWidth (包括边线的宽) 网页可见区域高: document.body.offsetHeight (包括边线的...