`

offsetWidth

CSS 
阅读更多

最佳答案:是对象的可见宽度,包滚动条等边线,会随窗口的显示大小改变

 

 

 

scrollWidth,clientWidth与offsetWidth的区别

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

<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>

 

clientWidth、offsetWidth、clientHeight..区别
2007-10-15 22:24

clientWidth、offsetWidth、clientHeight..区别

 

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均无关)

offsetwidth:是元素相对父元素的偏移宽度。等于border+padding+width
clientwidth:是元素的可见宽度。等于padding+width
scrollwidth:是元素的宽度且包括滚动部分。
分享到:
评论

相关推荐

    offsetWidth与style.width的区别

    首先,`offsetWidth`是一个综合性的属性,它返回一个元素的总宽度,包括边框、内边距(padding)和实际的宽度(即`width`属性)。这意味着如果你有一个设置了边框和内边距的元素,`offsetWidth`将返回这些额外空间...

    scrollwidth和offsetwidth区别

    ScrollWidth 与 OffsetWidth 之间的区别 ScrollWidth 和 OffsetWidth 是两个常用的 HTML 元素属性,它们都是用于获取或设置 HTML 元素的宽度,但是它们之间存在着一些关键的差异。 首先,让我们来了解一下这两个...

    基于js中style.width与offsetWidth的区别(详解).docx

    ### 基于JavaScript中`style.width`与`offsetWidth`的区别详解 #### 一、引言 在前端开发过程中,经常会遇到需要获取或修改DOM元素尺寸的情况。其中,`style.width` 和 `offsetWidth` 是两个常用的方法,用于获取...

    JavaScript中offsetWidth的bug及解决方法

    在JavaScript中,`offsetWidth` 是一个非常常用的属性,它用于获取一个元素的总宽度,包括内边距(padding)和边框(border),但不包括外边距(margin)。这个属性在处理元素尺寸变化时非常有用,但在某些特定情况...

    JavaScript属性scrollLeft,scrollWidth,clientWidth,offsetWidth之完全详解

    在JavaScript中,理解和掌握`scrollLeft`、`scrollWidth`、`clientWidth`以及`offsetWidth`这四个属性对于创建动态且响应式的网页至关重要。这些属性都与元素的尺寸和定位有关,尤其在处理滚动条和元素可视区域时...

    scrollWidth,clientWidth,offsetWidth的区别

    在网页开发中,理解和掌握DOM元素的尺寸属性是至关重要的,特别是`scrollWidth`、`clientWidth`和`offsetWidth`。这三个属性都是用来获取HTML元素宽度的,但它们各自的含义和应用场景有所不同。 首先,`scrollWidth...

    网页元素位置(scroll、client、offsetWidth等)获取、设置详解

    网页元素位置(scroll、client、offsetWidth等)获取、设置详解

    基于js中style.width与offsetWidth的区别(详解)

    示例代码中,将`box.style.width`设为'200px'后,控制台显示`offsetWidth`为208,这是因为`offsetWidth`还包括边框和内填充。 - 相反,`offsetWidth`不是一个可写的属性,所以尝试直接设置`offsetWidth`的值不会...

    scrollWidth,clientWidth与offsetWidth的区别

    ### scrollWidth、clientWidth与offsetWidth的区别 #### 一、scrollWidth详解 **scrollWidth** 属性表示元素及其内容的总宽度,包括由于内容溢出而不可见的部分。这一属性通常用于确定元素是否包含水平滚动条。...

    this.clientWidth和this.offsetWidth两个有什么不同

    "this.clientWidth" 和 "this.offsetWidth" 是JavaScript中用于获取元素宽度的属性,它们都属于元素的尺寸属性,但是它们之间存在一些差异。理解这两个属性的不同,对于前端开发人员来说是十分重要的。 首先,...

    HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth完全详解

    - **offsetWidth**: 获取元素相对于版面或由父坐标 `offsetParent` 属性指定的父坐标的宽度,它等于元素的宽度加上内边距(padding)和边框(border)的宽度。 - IE6.0、Firefox 1.06+:`offsetWidth = width + ...

    offsetWidth、clientWidth、scrollWidth、scrollTop、scrollLeft等属性图示

    在Web开发中,理解和掌握DOM元素的尺寸与位置属性至关重要,特别是`offsetWidth`、`clientWidth`、`scrollWidth`、`scrollTop`和`scrollLeft`这些属性。它们提供了关于元素几何特性的详细信息,有助于实现精确的布局...

    javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法

    在JavaScript中,DOM元素的尺寸和位置是通过一系列属性来获取的,如offsetWidth、clientWidth、innerWidth等。这些属性对于布局计算和动态界面设计至关重要。以下是对这些属性和方法的详细解释: 1. **clientWidth...

    无空白图片向左滚动图片无空白滚动

    if(demo2.offsetWidth-demo.scrollLeft) demo.scrollLeft-=demo1.offsetWidth else{ demo.scrollLeft++ } } var MyMar=setInterval(Marquee,speed) demo.onmouseover=function() {clearInterval(MyMar)} ...

    CSS中expression使用简介

    left: expression(document.body.offsetWidth - 110 + "px"); top: expression(document.body.offsetHeight - 110 + "px"); background: red; } ``` 在这个例子中,元素`#myDiv`的位置会随着浏览器窗口大小的...

    javascript scrollLeft,scrollWidth,clientWidth,offsetWidth 完全详解

    在JavaScript中,`scrollLeft`, `scrollWidth`, `clientWidth`, `offsetWidth` 等属性是处理元素尺寸和滚动位置的重要工具。这些属性各自代表着不同的意思,在实际开发中有着广泛的应用。 `scrollLeft` 属性用于...

Global site tag (gtag.js) - Google Analytics