总述 在JS 中scrollWidth、scrollHeight、scrollLeft 、scrollTop 属性在做一些复杂的交互效果中是非常常用的，因此在本博文中详细的介绍并给出实例。...2. scrollWidth和scrollHeight 2.1 概念 element.scrollWidth：返回元素的整体宽度，包括由于溢出而无法展示在网页的不可见部分。...2.2 实例 在页面中，溢出说得更加通俗一些就是有没有滚动条出现，出现了，说明子元素有一部分被父元素遮挡了，就溢出了，下面给出两个实例，一个没有溢出（没有滚动条），一个溢出了，分别观察他们的scrollWidth...children_div"> this is children console.log(children_div.scrollWidth... console.log(children_div.scrollWidth, children_div.scrollHeight) </script
clientWidth、scrollWidth与offsetWidth这三种经常会混淆，举例解释这三种宽度 1、没有滚动条的情况 #boxWrap { width: 300px;...=document.getElementById("box1").scrollWidth;//220 scrollWidth=content+padding var offsetWidth=document.getElementById...= document.getElementById("box2").scrollWidth; //420 var offsetWidth2 = document.getElementById...("box2").offsetWidth; //430 alert(clientWidth2 + " , " + scrollWidth2 + " , " + offsetWidth2) <...("boxWrap").offsetWidth; //322 alert(clientWidth3 + " , " + scrollWidth3 + " , " + offsetWidth3)
网页可见区域高：document.body.offsetWeight: 网页可见区域高：document.body.offsetHeight; 网页正文全文宽：document.body.scrollWidth...———————————————— 一个scrollWidth和clientWidth的例子： 77.htm文件 在文本框内输入内容，当横向滚动条没出来前scrollWidth和clientWidth的值是一样的。...当一行内容超出文本框的宽度，就有横向滚动条出来了，scrollWidth的值就变了。 scrollWidth是对象实际内容的宽度。
html> offsetWidth、clientWidth、width、scrollWidth...html中先赋值才能取到 返回的是字符串 如"10px" 可读写 var l = $(oDiv).height(); //height(val) 设置高度 var m = oDiv.scrollWidth
一、scrollWidth 首先，我们先上MSDN上查一下scrollWidth的文档说明。...链接地址：https://developer.mozilla.org/en/DOM/element.scrollWidth scrollWidth is a read–only property that...如下图，scrollWidth = 左内边距 + 右内边距 （2）有滚动条，有内容。如下图，scrollWidth = 左内边距 + 内容宽度 + 右内边距 （3）有滚动条，有内容。...如下图，scrollWidth = 左内边距 + 内容宽度 综上，IE 8的scrollWidth = 左内边距 + 内容宽度。...如下图，scrollWidth = 左内边距 + 内容宽度 综上，Firefox的scrollWidth = 左内边距 + 内容宽度。
---- 前言 最近在开发时遇到这样一个需求，一个表单列表报错后，滚动表单到能展示报错元素，做的时候发现clientWidth，offsetWidth，scrollWidth这几个概念自己有时候还是会弄混...offsetLeft/offsetRight/offsetBottom： 代表元素距离父级元素的相对距离，但是父级元素需要具有relative定位，直到找到body，并且即使元素会被滚动，这个值也不会改变 scrollWidth.../scrollHeight scrollWidth/scrollHeight 返回值包含 content + padding + 溢出内容的尺寸，这个只针对dom的子元素出现溢出情况时，才有效果，不然它始终和...this.scrollRef.scrollTop + needScroll; clearTimeout(timer); }, 0); } 最后 本文整理了clientWidth，offsetWidth，scrollWidth
HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth到底指的哪到哪的距离之完全详解 scrollHeight: 获取对象的滚动高度。...scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度...同理 clientWidth、offsetWidth 和 scrollWidth 的解释与上面相同，只是把高度换成宽度即可。...scrollWidth 也是类似道理。...等于padding+width scrollwidth:是元素的宽度且包括滚动部分。
包括边线和滚动条的宽)"; s = " 网页可见区域高：" document.body.offsetHeight " (包括边线的宽)"; s = " 网页正文全文宽：" document.body.scrollWidth...scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度...同理 clientWidth、offsetWidth 和 scrollWidth 的解释与上面相同，只是把高度换成宽度即可。...scrollWidth 也是类似道理。...等于padding+width scrollwidth:是元素的宽度且包括滚动部分。
js中clientWidth, scrollWidth, innerWidth, outerWidth,offsetWidth的属性汇总，测试浏览器：ie7~ie11、chrome 和 firefox等...一、测试1：无滚动条时，dom对象的offsetWidth、clientWidth和scrollWidth （1）测试代码 <!...="+oB2.<em>scrollWidth</em>, "scrollHeight="+oB2.scrollHeight); console.log("scrollLeft="+oB2.scrollLeft, "scrollTop...IE7下，scrollWidth = 20，scrollHeight = 34 （3）图解结果 ?...二、测试2：有滚动条时，dom对象offsetWidth、clientWidth 和 scrollWidth （1）测试代码 <!
内边距，不包括边框和外边距）style.width //返回元素的宽度（包括元素宽度，不包括内边距、边框和外边距）style.height //返回元素的高度（包括元素高度，不包括内边距、边框和外边距）scrollWidth...不包括边框和外边距），无溢出的情况，与clientHeight相同style.width 返回的是字符串，如28px，offsetWidth返回的是数值28；style.width/style.height与scrollWidth
深入理解CSS盒模型、BFC、OffsetWidth&ClientWidth&ScrollWidth 本文将从盒模型开始，一步步涉及一些常见的前端笔试和面试点 主要参考自第一篇文章，然而笔者在读的时候未觉详尽...盒模型为标准模型，元素内容宽度为100px, padding宽度为10px，border宽度为20px, margin宽度为30px 5.DOM属性之 OffsetWidth / ClientWidth / ScrollWidth
具体代码：HTML> var w=document.documentElement.scrollWidth || document.body.scrollWidth; var h=document.documentElement.scrollHeight
pTar.height = pTar.Document.body.offsetHeight + 15 + "px"; pTar.width = pTar.Document.body.scrollWidth...pTar.contentDocument.body.offsetHeight + 15 + "px"; pTar.width = pTar.contentDocument.body.scrollWidth...pTar.height = pTar.contentDocument.body.offsetHeight; pTar.width = pTar.contentDocument.body.scrollWidth...pTar.height = pTar.contentDocument.body.offsetHeight; pTar.width = pTar.contentDocument.body.scrollWidth...pTar.contentDocument.body.offsetHeight; } pTar.width = pTar.contentDocument.body.scrollWidth
原生操作 2.1. offsetWidth、offsetHeight 2.2. clientWidth、clientHeight 2.3. scrollWidth、scrollHeight...", div1.scrollWidth, div1.scrollHeight); console.log("div2:scrollWidth", div2.scrollWidth, div2....scrollHeight); console.log("div3:scrollWidth", div3.scrollWidth, div3.scrollHeight); console.log...("div4:scrollWidth", div4.scrollWidth, div4.scrollHeight); console.log("span1:scrollWidth", span1....scrollWidth, span1.scrollHeight); }) ?
+"px";//除了当前，其他的走到scrollWidth位置 28 } 29 30 //三个按钮动画开始 31 var iNow=0;//控制播放张数 32 for(...});//当前图片慢慢走到scrollWidth位置 37 --iNow<0?...});//当前图片慢慢走到-scrollWidth位置 44 ++iNow>imgs.length-1?...}else if(that<iNow){//相当于左侧按钮 56 animate(imgs[iNow],{left:scrollWidth});//当前的走到右边...57 imgs[that].style.left=-scrollWidth+"px";//点击的走到左边 58 59 } 60
element.scrollWidth 返回元素的整体宽度。 element.scrollLeft 返回元素左边缘与视图之间的距离。...1.scrollHeight 和 scrollWidth 使用scrollHeight和scrollWidth属性返回元素的高度，单位为px,包括padding scrollHeight 和 scrollWidth...scrollHeight 和 scrollWidth 属性为只读属性 2.scrollLeft 和 scrollTop 需要一个监听方法 还存在浏览器兼容问题 二.窗口相关 1.window对象的scrollBy
=pTar.contentWindow.document.body.offsetHeight+15+”px”; pTar.width=pTar.contentWindow.document.body.scrollWidth...Sys.ie==’8.0′){ pTar.height=pTar.Document.body.offsetHeight+15+”px”; pTar.width=pTar.Document.body.scrollWidth...+”px”; }else{ pTar.height=pTar.Document.body.scrollHeight+25+”px”; pTar.width=pTar.Document.body.scrollWidth...pTar.height=pTar.contentDocument.body.offsetHeight+15+”px”; pTar.width=pTar.contentDocument.body.scrollWidth...}else{ pTar.height=pTar.contentDocument.body.offsetHeight; } pTar.width=pTar.contentDocument.body.scrollWidth
比如说在获取宽度时，可以使用以下方法： function initWidth() { var innerWidth = window.innerWidth; var scrollWidth...= document.body.scrollWidth; return (innerWidth < scrollWidth ?...window.innerWidth : document.body.scrollWidth); } 然后是对html的默认font-size设置最小宽度。
五、scrollWidth和scrollHeight scrollWidth和scrollHeight这两个属性用来获取指定元素内容层的真实宽度和高度....当不存在水平或垂直滚动条时，scrollWidth和scrollHeight等于clientWidth和clientHeight， 当存在水平或垂直滚动条时，请看下面演示(将div#sub-contetn...的height设为300px) 输出： 可以看到图中存在垂直方向的滚动条 scrollWidth=clientWidth=width+左右padding-滚动条宽度=203 scrollHeight...和scrollHeight等于clientWidth和clientHeight还是有很大联系的，当内容层的高宽度超过指定元素的高宽度时，scrollWidth和scrollHeight还得在clientWidth...也可以这样理解，scrollWidth和scrollHeight即可视区域宽高度+被隐藏区域宽高度。
三、获取网页大小的另一种方法 网页上的每个元素还有scrollHeight和scrollWidth属性，指包含滚动条在内的该元素的视觉面积。...那么，document对象的scrollHeight和scrollWidth属性就是网页的大小，意思就是滚动条滚过的所有长度和宽度。...document.body.scrollHeight } } else { return { width: document.documentElement.scrollWidth...如果网页内容能够在浏览器窗口中全部显示，不出现滚动条，那么网页的clientWidth和scrollWidth应该相等。但是实际上，不同浏览器有不同的处理，这两个值未必相等。... if (document.compatMode == "BackCompat"){ return { width: Math.max(document.body.scrollWidth
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
