`
燮羽天翔
  • 浏览: 110239 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

javascript获得元素的尺寸和位置二 : clientWidth/Height、scrollWidth/Height、scrollTop/Left

    博客分类:
  • JS
阅读更多

       1、clientWidth clientHeight

  元素的可视部分的宽度和高度(也就是CSS的width加padding)。它们不把边框和滚动条计算在内,也不包括任何可能的滚动。

  若CSS中没有指定元素的高度和宽度(即自适应),则IE中显示0,而非IE浏览器则显示实际的值

 

  2、 offsetWidth offsetHeight

  元素在页面中占据的宽度和高度的总计。它们和前一对属性的区别在于它们把元素的边框和滚动条计算在内。

  若CSS中没有指定元素的高度和宽度(即自适应),所有浏览器都会显示实际的值包括width + padding + border

 

  3、 scrollWidth scrollHeight

  给出设置了overflow:visible的元素总的宽度和高度。如果这个宽度和高度大于clientWidth和clientHeight,该元素就需要滚动条。

  width + padding + border

  overflow:hidden/scroll 时 ,所有浏览器都会返回该元素的全部显示时的值

  overflow:visible 时,google chrome、Safari、IE会显示元素全部显示时的值,而FF、Opera会显示应当显示的区域的值

  该属性有很多的Bug,所以在具体应用时,用处很少。

 

  4、 scrollTop 和 scrollLeft

  scrollTop和scrollLeft属性给出元素已经滚动的距离(像素值)。当你设置这些属性的时候,页面滚动到新的坐标。

 

  5、 图

  • 大小: 7.8 KB
  • 大小: 15.6 KB
分享到:
评论

相关推荐

    图片放大镜

    parseInt(this.getElementsByTagName('div')[0].style.width) / 2,0),this.clientWidth - this.getElementsByTagName('div')[0].offsetWidth) + 'px' //left=鼠标x - this.offsetLeft - 浏览框宽/2,Math.max和Math....

    JavaScript Table行定位效果

    1,如果是根元素、body元素或元素的position是fixed,将返回null; 2,如果是area元素,会返回最接近的map元素; 3,返回至少符合以下一个条件的最接近该节点的元素:1,元素的position不是static;2,是body元素;3...

    圣诞节 祝福网站 全部源码

    height:auto"><script type="text/javascript"> var swf_width=1000; var swf_height=1100; swf_width=document.documentElement.clientWidth; document.write('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-...

    原生JS获取元素的位置与尺寸实现方法

    1、内高度、内宽度: 内边距 + 内容框 clientWidth clientHeight 2、外高度,外宽度: 边框 + 内边距 + 内容框 ...//left:元素的左边界和父元素左边界的距离 //right:元素的右边界和父元素的左边界的距离 //bo

    JS大全 web编程

    scrollLeft,scrollWidth,clientWidth,offsetWidth完全详解 2009年12月14日,16:58:19 | ArthurXF scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的...

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

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

    网页漂浮广告代码

    var R= document.body.clientWidth-obj.offsetWidth var B = document.body.clientHeight-obj.offsetHeight obj.style.left = x + document.body.scrollLeft obj.style.top = y + document.body.scrollTop x = x...

    获取页面长宽和滚动条的位置

    <script type="text/javascript"> function GetPageSize() { var scrW, scrH; if(window.innerHeight && window.scrollMaxY) { // Mozilla scrW = window.innerWidth + window.scrollMaxX; scrH = ...

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

    图示offsetWidth、clientWidth、scrollWidth、scrollTop、scrollLeft等属性,对于一些页面的控制很有帮助。

    js 实现飘动土层代码

    img.style.top = yPos + document.body.scrollTop; if (yon) { yPos = yPos + step; } else { yPos = yPos - step; } if (yPos ) { yon = 1; yPos = 0; } if (yPos >= (height - Hoffset)) { yon = 0; yPos = ...

    js使用小技巧

    Javascript小技巧一箩筐 事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event.srcElement.releaseCapture(); 事件按键 event.keyCode ...

    js获取元素相对窗口位置的实现代码

    obj.offsetLeft //元素相对于父元素的left obj.offsetTop //元素相对于父元素的top obj.offsetWidth //元素的宽度 obj.offsetHeight //元素的高度 区别: clientWidth = width + padding clientHeight = height + ...

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

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

    javascript函数的解释

    5.得到表单中元素的名称和值:document.getElementById("表单中元素的ID号").name(或value) 6.一个小写转大写的JS: document.getElementById("output").value = document.getElementById("input").value.toUpperCase...

    scrollLeft,scrollTop等等详解.pdf

    网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body.offsetWidth (包括边线的宽); 网页可见区域高: document.body.offsetHeight (包括...

    Javascript dom位置、大小、鼠标定位操作

    做了这么久web开发,凡是涉及用js操作dom元素位置、测量dom元素大小时就心虚,因为js整整提供了二十几个属性对dom元素的位置、大小进行操作。比如:clientTop、offsetTop、scrollTop、clientWidth、offsetWidth、...

    使用二进制分析div元素的各种宽,高同理

    父元素与子元素的scrollWidth/offsetWidth/clientWidth

    淘宝大图轮播

    expand.style.height = clip.clientWidth * parseFloat(clipHeight) / parseFloat(clipWidth) + "px"; } else { expand.style.height = clip.clientHeight + "px"; expand.style.width = clip.clientHeight * ...

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

    javascript scrollLeft,scrollWidth,clientWidth,offsetWidth 完全详解,实例修正版。

    Delphi 绘制艺术图案.rar

     self.ClientWidth:=200;  r:=self.ClientWidth/2;  Sect:=20;  for i:=0 to Sect-1 do  begin  x[i]:=Trunc(r*Cos(i*2*PI/Sect) self.ClientWidth/2);  y[i]:=Trunc(r*Sin(i*2*PI/Sect) self.ClientHeight /...

Global site tag (gtag.js) - Google Analytics