• 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是元素的宽度且包括滚动部分。

     

  • 相关阅读:
    1462. 课程安排 IV
    最全的CSS浏览器兼容问题【FF与IE】
    this&super两个关键字的意义和用法
    Javascript this 的一些总结
    JS-封装类或对象的最佳方案
    背景色透明,里面内容(图片、文字)不透明
    css3 前端开发
    html5游戏之Box2d物理引擎集成
    Box2d引擎之元素
    西天取经第一步——制作自己的HTML5游戏
  • 原文地址:https://www.cnblogs.com/suizhikuo/p/2300167.html
Copyright © 2020-2023  润新知