• scrollWidth,clientWidth与offsetWidth的区别


     

    scrollWidth,clientWidthoffsetWidth的区别

    scrollWidth 是对象的实际内容的宽,不包边线宽度,会随对象中内容的多少改变(内容多了可能会改变对象的实际宽度)。clientWidth 是对象可见的宽度,不包滚动条等边线,会随窗口的显示大小改变。 offsetWidth 是对象的可见宽度,包滚动条等边线,会随窗口的显示大小改变。 一个scrollWidthclientWidth的例子:

    <DIV id=demo  style="OVERFLOW: hidden; WIDTH: 460px; COLOR: #ffffff; HEIGHT:

    120px">  <DIV align=left>  <DIV align=left></DIV>  <TABLE height=120 cellPadding=0 width=600 align=right  border=0 cellspace="0">  <TBODY>  <TR>  <TD id=demo1 vAlign=top width=543>  <TABLE height=120 cellSpacing=0 cellPadding=0  width=543 border=0>  <TBODY>  <TR>  <TABLE borderColor=#ffffff cellSpacing=2  cellPadding=0 width=50 border=1>  <TD></TR></TBODY></TABLE></TD>  <TD id=demo2 vAlign=top  width=47></TD></TR></TBODY></TABLE>  <SCRIPT> var speed=1//速度数值越大速度越慢 demo2.innerHTML=demo1.innerHTML function Marquee(){ if(demo2.offsetWidth-demo.scrollLeft<=0) /*scrollLeft 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离。*/ demo.scrollLeft-=demo1.offsetWidth else{ demo.scrollLeft++ } } var MyMar=setInterval(Marquee,speed) demo.onmouseover=function() {clearInterval(MyMar)} demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)} </SCRIPT>  </DIV></DIV>

    clientWidthoffsetWidthclientHeight..区别

    2007-10-15 22:24

    clientWidthoffsetWidthclientHeight..区别 IE6.0FF1.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属性,与clientWidthoffsetWidthclientHeightoffsetHeight均无关) offset是元素相对父元素的偏移宽度。等于border+padding+width clientwidth:是元素的可见宽度。等于padding+width scroll是元素的宽度且包括滚动部分。

     

  • 相关阅读:
    js中.和[]的区别
    JavaScript【引用方法】操作方法
    JavaScript【引用方法】重排序方法
    JavaScript【引用方法】队列方法
    JavaScript【引用类型】栈方法
    JavaScript【引用类型】转换方法
    JavaScript【引用类型】检测类型
    JavaScript【引用类型】Array 类型
    JavaScript【引用类型】Object 类型
    【HTML5 绘图与动画】 使用图像 1.导入图像 2.缩放图像 3.裁切图像
  • 原文地址:https://www.cnblogs.com/suizhikuo/p/2300167.html
Copyright © 2020-2023  润新知