offsetHeight和clientHeight的区别

offsetHeight与offsetWidth作用相同，前者是获取元素的高度后者则是宽度．offsetHeight属性可以获取元素的可见高度值。offsetHeight包括边框和内部空白补丁。但超出元素的内容则不被计算。也就是说只返回元素的实际高度值。如果看得着边框，从上边框到下边框的距离则是offsetHeight返回的值。经过测试无论在IE或FF均返回正常。值得一提的是利用css来控制元素的高度，在IE里会被撑大，FF里则不会，但返回的值是正确的！offsetHeight虽不是W3C标准属性，但广泛被浏览器支持。

百度的。。。。。。。。。。。clientHeight大部分浏览器对 clientHeight 都没有什么异议，都认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，即然是指可看到内容的区域，滚动条不算在内。但要注意padding是算在内。其计算方式为clientHeight = topPadding + bottomPadding+ height - scrollbar.height。offsetHeight在IE6，IE7，IE8以及最新的的FF, Chrome中，在元素上都是offsetHeight = clientHeight + 滚动条 + 边框。scrollHeightscrollHeight是元素的padding加元素内容的高度。这个高度与滚动条无关，是内容的实际高度。计算方式 ：scrollHeight = topPadding + bottomPadding + 内容margix box的高度。在浏览器中的区别在于：IE6、IE7 认为scrollHeight 是网页内容实际高度，可以小于clientHeight。FF、Chrome 认为scrollHeight 是网页内容高度，不过最小值是clientHeight。注： 以上都是对于一般元素而方言的，body和documentElement的clientHeight, offsetHeight和scrollHeight在各个浏览器中的计算方式又不同。在所有的浏览器中，如果你想获取整个视窗的高度，你得用documentElement.clientHeight，因为body.clientHeight是由它的内容决定的。 关于body和documentElement的这些属性，则完全是另外一回事：

height：指元素内容的高度clientHeight：内容高度+padding高度offsetHeight：内容高度+padding高度+边框宽度

因为图片加载需要时间，你的代码在获取div的offsetHeight的时候，图片还没有加载完成，所以得到的高度没有包含图片。可以把获取offsetHeight的方法写在图片的onload事件里，或者等图片加载后再获取。

offsetHeight = 内容可视区域的高度+ 滚动条 + 边框。obj.offsetTop 指 obj 距离上方或上层控件的位置scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。

首先理解三个dom元素，分别是：clientHeight、offsetHeight、scrollTop。clientHeight：这个元素的高度，占用整个空间的高度，所以，如果一个div有滚动条，那个这个高度则是不包括滚动条没显示出来的下面部分的内容。而只是单纯的DIV的高度。offsetHeight：是指元素内容的高度。依照上面的，那这个高度呢就是DIV内部的高度，包括可见部分及以滚动条下面的不可见部分。scrollTop：这个是什么呢？他可以理解为滚动条可以滚动的长度。举例，如果一个DIV高度是400px（即clientHeight为400），而里面的内容是一个很长的列表，内容的高度是1000px（即offsetHeight为1000）。那么，可见部分我们看到400px，1000px的内容中还有600px不可见。而这不可见的部分呢，正是我们通过拉动滚动条才能把这一部分显示出来。你如果滚动条不拉动，此时scrollTop为0，如果你把滚动条拉到底，显示出列表最下面的部分，此时，scrollTop为600。　所以scrollTop的取值区间为[0, 600]。　所以这个600可以理解为滚动条可以滚动的长度。理解完上面的这个概念之后。要判断是否滚动到底部就很好做了。首先，我们拉动滚动条，从最上面拉到最下面，变化的是scrollTop的值，而这个值是有一个区间的。这个区间是：[0, (offsetHeight - clientHeight)]即，滚动条拉动的整个过程的变化在 0 到 (offsetHeight – clientHeight) 范围之内。1、判断滚动条滚动到最底端：scrollTop == (offsetHeight – clientHeight)2、在滚动条距离底端50px以内：(offsetHeight – clientHeight) – scrollTop <= 503、在滚动条距离底端5%以内：scrollTop / (offsetHeight – clientHeight) >= 0.95如上。如果要实现拉到底部自动加载内容。只要注册个滚动条事件：[javascript] view plain copy在CODE上查看代码片派生到我的代码片scrollBottomTest =function(){$("#contain").scroll(function(){var $this =$(this),viewH =$(this).height(),//可见高度contentH =$(this).get(0).scrollHeight,//内容高度scrollTop =$(this).scrollTop();//滚动高度//if(contentH - viewH - scrollTop <= 100) { //到达底部100px时,加载新内容if(scrollTop/(contentH -viewH)>=0.95){ //到达底部100px时,加载新内容// 这里加载数据..}});}

offsetHeight是js对象所能支持的方法，而$("div:eq(1)")所获得的是一个JQUERY对象，他是不支持offsetHeight的。可以这样修改：1：$("div:eq(1)").get(0).offsetHeight;//get()方法返回了DOM元素，可以支持offsetHeight属性，（注意：get()过后返回的是普通DOM元素，已经不支持JQUERY的方法了，但是可以用JS的方法）。2：像楼上那哥们一样，$("div:eq(1)").height();height()是JQUERY对象所支持的方法。

offsetHeight = 内容可视区域的高度+ 滚动条 + 边框。offsetTop = 当前标签距离上方或上层控件的位置

元素的宽度，高度，离左边的距离，离右边的距离。比如：我想知道body的宽度，高度，离左边的距离，离右边的距离.通过document.body.offsetWidth,document.body.offsetHeight,document.body.offsetLeft,document.body.offsetRight便可以计算出来、

四种浏览器对 clientHeight、offsetHeight、scrollHeight、clientWidth、offsetWidth 和 scrollWidth 的解释差异网页可见区域宽：document.body.clientWidth 网页可见区域高：document.body.clientHeight 网页可见区域宽：document.body.offsetWidth (包括边线的宽) 网页可见区域高：document.body.offsetHeight (包括边线的宽) 网页正文全文宽：document.body.scrollWidth 网页正文全文高：document.body.scrollHeight 网页被卷去的高：document.body.scrollTop 网页被卷去的左：document.body.scrollLeft 网页正文部分上：window.screenTop 网页正文部分左：window.screenLeft 屏幕分辨率的高：window.screen.height 屏幕分辨率的宽：window.screen.width 屏幕可用工作区高度：window.screen.availHeight 屏幕可用工作区宽度：window.screen.availWidth这里说说四种浏览器对 document.body 的 clientHeight、offsetHeight 和 scrollHeight 的解释。这四种浏览器分别为IE（Internet Explorer）、NS（Netscape）、Opera、FF（FireFox）。clientHeight四种浏览器对 clientHeight 的解释都没有什么异议，都认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，一般是最后一个工具条以下到状态栏以上的这个区域，与页面内容无关。offsetHeightIE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。NS、FF 认为 offsetHeight 是网页内容实际高度，可以小于 clientHeight。scrollHeightIE、Opera 认为 scrollHeight 是网页内容实际高度，可以小于 clientHeight。NS、FF 认为 scrollHeight 是网页内容高度，不过最小值是 clientHeight。简单地说clientHeight 就是透过浏览器看内容的这个区域高度。NS、FF 认为 offsetHeight 和 scrollHeight 都是网页内容高度，只不过当网页内容高度小于等于 clientHeight 时，scrollHeight 的值是 clientHeight，而 offsetHeight 可以小于 clientHeight。IE、Opera 认为 offsetHeight 是可视区域 clientHeight 滚动条加边框。scrollHeight 则是网页内容实际高度。同理clientWidth、offsetWidth 和 scrollWidth 的解释与上面相同，只是把高度换成宽度即可。注：以上也是转的，对自己有点参考而已，有些值要跟据页面方式而定！我用的Ajax就完全没法用上面的方法定高！javaScript窗口属性：网页可见区域宽：document.body.clientWidth网页可见区域高：document.body.clientHeight网页可见区域宽：document.body.offsetWidth (包括边线的宽)网页可见区域高：document.body.offsetHeight (包括边线的宽)网页正文全文宽：document.body.scrollWidth网页正文全文高：document.body.scrollHeight网页被卷去的高：document.body.scrollTop网页被卷去的左：document.body.scrollLeft网页正文部分上：window.screenTop网页正文部分左：window.screenLeft屏幕分辨率的高：window.screen.height屏幕分辨率的宽：window.screen.width屏幕可用工作区高度：window.screen.availHeight屏幕可用工作区宽度：window.screen.availWidth在IE、FireFox、Opera下都可以使用document.body.clientWidthdocument.body.clientHeight即可获得，很简单，很方便。而在公司项目当中：Opera仍然使用document.body.clientWidthdocument.body.clientHeight可是IE和FireFox则使用document.documentElement.clientWidthdocument.documentElement.clientHeight原来是W3C的标准在作怪啊http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">如果在页面中添加这行标记的话在IE中：document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY对象高度document.documentElement.clientWidth ==> 可见区域宽度document.documentElement.clientHeight ==> 可见区域高度注：在IE中“可见区域”基本不认可body，而必需使用documentElement！！！！在FireFox中：document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY对象高度document.documentElement.clientWidth ==> 可见区域宽度document.documentElement.clientHeight ==> 可见区域高度在Opera中： document.body.clientWidth ==> 可见区域宽度document.body.clientHeight ==> 可见区域高度document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）获取窗口高宽：var w= document.documentElement.offsetWidth;var h=document.documentElement.offsetHeight;

你是要实现网页还是图片成比例缩放啊？我这有个图片成比例缩放的JS代码，如下：<script type="text/javascript">//自动缩放图片尺寸//参数：图片对象，最大宽度，最大高度function gw_js_chgimg_wh(obj,width,height){ var image=new Image(); image.src=obj.src; //获取图像路径 var width1=image.width; //获取图像宽度 var height1=image.height; //获取图像高度 var w=width1/width; var h=height1/height; if(width1<width && height1<height){ obj.width=width1; obj.height=height1; }else{ if(h>w){ obj.height=height; obj.width=width1*height/height1; }else{ obj.width=width; obj.height=height1*width/width1; } }}</script>如果你是要网页成比例的代码，具体是要实现什么样的功能？请描述清楚一点，好方便理解。

恩。。。这个你代码不是很全。不过简单说下！二个概念的理解。offsetHeight scrollTop 。前者是说对象的高度，后者是说滚动最顶端到最顶端的距离！不清楚可以百度下别的地方。简单说就是超出浏览器上面看不见的部分。然后讲解上面的代码：var speed=20; 这个用来设置setInterval(Marquee,speed) 表示0.02s执行一次Marquee。function Marquee(){ if(dome2.offsetTop-dome.scrollTop<=0) //dome2的高度减dome滚动到上面的距距离。开始0. dome.scrollTop-=dome1.offsetHeight else{ dome.scrollTop++ } }//dome2的高度减dome滚动到上面的距距离。开始0.于是执行else语句。 dome.scrollTop++ 这个让最上面的内容隐没在了顶部。而让后面的显示出来了。而且一直加1.这样造就了滚动的效果！dome2.innerHTML=dome1.innerHTML 把原始的dome1里面的内容复制到dome2.父元素样式里宽度固定，设置为超出隐藏（overflow:hidden;）var MyMar=setInterval(Marquee,speed)Marquee函数每隔speed毫秒便执行。函数执行的效果上面有讲过了。然后是鼠标事件：悬浮上函数执行取消。离开后，继续执行！

function getDocHeight(doc) { //在IE中doc.body.scrollHeight的可信度最高 //在Firefox中，doc.height就可以了 var docHei = 0; var scrollHei;//scrollHeight var offsetHei;//offsetHeight，包含了边框的高度 if (doc.height) { //Firefox支持此属性，IE不支持 docHei = doc.height; } else if (doc.body) { //在IE中，只有body.scrollHeight是与当前页面的高度一致的， //其他的跳转几次后就会变的混乱，不知道是依照什么取的值！ //似乎跟包含它的窗口的大小变化有关 if(doc.body.offsetHeight) docHei = offsetHei = doc.body.offsetHeight; if(doc.body.scrollHeight) docHei = scrollHei = doc.body.scrollHeight; } else if(doc.documentElement) { if(doc.documentElement.offsetHeight) docHei = offsetHei = doc.documentElement.offsetHeight; if(doc.documentElement.scrollHeight) docHei = scrollHei = doc.documentElement.scrollHeight; } /* docHei = Math.max(scrollHei,offsetHei);//取最大的值，某些情况下可能与实际页面高度不符！ */ return docHei; }

在按下按钮的时候，先得到div高宽 ，然后再让div的style.siaply="block"这样就可以覆盖整个页面了。var hA =document.getElementById("div1"); hA.style.width = window.screen.availWidth-20; //得到宽度 var s_height=document.body.scrollHeight; if(s_height<window.screen.availHeight) { s_height=window.screen.availHeight; } hA.style.height=s_height+"px"//设置高度 另外 根据你的需要，你可以看看下面这个 网页可见区域宽：document.body.clientWidth 网页可见区域高：document.body.clientHeight 网页可见区域宽：document.body.offsetWidth (包括边线的宽) 网页可见区域高：document.body.offsetHeight (包括边线的宽) 网页正文全文宽：document.body.scrollWidth 网页正文全文高：document.body.scrollHeight 网页被卷去的高：document.body.scrollTop 网页被卷去的左：document.body.scrollLeft 网页正文部分上：window.screenTop 网页正文部分左：window.screenLeft 屏幕分辨率的高：window.screen.height 屏幕分辨率的宽：window.screen.width 屏幕可用工作区高度：window.screen.availHeight 屏幕可用工作区宽度：window.screen.availWidth HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 event.clientX 相对文档的水平座标 event.clientY 相对文档的垂直座标 event.offsetX 相对容器的水平坐标 event.offsetY 相对容器的垂直坐标 document.documentElement.scrollTop 垂直方向滚动的值 event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量 IE，FireFox 差异如下： 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均无关)

offsetXxx拿的是行内样式的高度、宽度等如果该元素的样式引用外部样式表、那么他的offset是取不到值的

clientWidth 是对象可见的宽度，不包滚动条等边线，会随窗口的显示大小改变。 offsetWidth 是对象的可见宽度，包滚动条等边线，会随窗口的显示大小改变。 一个scrollWidth和clientWidth的例子：020202<div id="demo"style="overflow: hidden; width: 460px; color #ffffff; height: 120px"<table height="120" cellPadding="0" width="600" align="right" border="0"cellspacing="0"<tr<td id=demo1 vAlign=top width=543<table borderColor="#ffffff" cellSpacing="2" cellPadding="0"width="50" border="1"<tr<tddddd</td</tr</table</td<td id=demo2 vAlign=top width=47</td</tr</table</div<script type="text/javascript"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);}</script02020202clientWidth、offsetWidth、clientHeight..区别02IE6.0、FF1.06+：clientWidth = width + paddingclientHeight = height + paddingoffsetWidth = width + padding + borderoffsetHeight = height + padding + borderIE5.0/5.5：clientWidth = width - borderclientHeight = height - borderoffsetWidth = widthoffsetHeight = height(需要提一下：CSS中的margin属性，与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)offsetwidth:是元素相对父元素的偏移宽度。等于border+padding+widthclientwidth：是元素的可见宽度。等于padding+width

看下alert(hei.style.width) 值是0吗 就知道了

可以在body的load事件中写一段代码，获取网页的大小，然后设置div的大小就可了，希望这种方法可行

对没有 offsetRight 或者 offsetBottom 之类的有 offsetWidth offsetHeight offsetLeft offsetTop另外 如果你想看到底有没有这些属性 你可以看看关于js的数据还可以 在 google 火狐 或者ie 控制台查看 //强推荐 全看一遍 什么都知道了 不懂的属性百度举个小例子 ：console.dir(document.getElementById("box"))可以直接看到关于 id为box的元素的很多信息 包括位置等等 希望对你有所帮助

2021年,我今天遇到了和你一样的问题,咱俩的代码差异很大,所以我把最终解决的过程跟你分享一下,你可以根据我的解题思路来解决你遇到的问题,我的滚动内容是用160px高的div容器包裹的1个ul列表,ul列表中又包含3个li列表项目,每个列表项目高度40px分别包含不同的文字内容,虽然,我的列表总高度才40*3=120px,是小于div容器的160px的高度的,按道理说,没有内容溢出是不能进行滚动的,但是,结果很意外,运行代码,页面效果是三行文字向上循环滚动,但是,出现了和你一样的每次循环都会产生跳一下的现象,解题思路:①我的内容是3个摞在一起的li,高度之和是120px,是小于div容器的高160px的,按正常逻辑,因为没有溢出内容,所以是不能产生向上滚动的效果的,也就是说不具备向上滚动的条件,按理说应该无法向上滚动才对,但实际情况是滚动效果出现了,这就只能说明一个问题,我的滚动内容中又多了别的东西,(多出来的东西的高度+我的实际内容)>160px(div容器的高度)具备了滚动条件,所以才出现了"不应该出现的"滚动效果,所以,只要我找到多出来的这个东西,问题也就应该迎刃而解了,②那么这个多出来的东西,用什么方法找呢,答案是使用边框:border:1px solid red;来找出多了哪些东西,因为我们都是要文字向上滚动的效果,所以我们关心的是内容的上边和下边,也就是top和bottom有没有多出什么东西来,而内容的左和右多出什么东西是不影响我们的内容向上滚动的,我开始给我用到的每个元素加上边框来看它们的高度,我的元素有li,有ul,有div,经过查看,我发现,所有的元素之间都有填充,这就解释了,为什么我原本的内容120px不够滚动条件,但却产生了滚动效果的问题,正是因为,元素之间的这些填充,导致我原本120px的内容,最后加到一起很轻松的超过了div容器的160px的高度,从而产生了溢出,具备了滚动的条件,最终产生了滚动的条件,ok,问题找到,开始解决,我把所有元素之间的top和bottom的填充都去掉了,用的是margin-top:0px,和margin-bottom:0px;这样,li和ul之间没有了填充,ul和div之间也没有了填充,此时,去掉了所有多出来的东西后,我的内容的高度就是实实在在的120px了,当然结果就是保存代码并刷新页面后,没有了滚动效果,于是,我又在xhtml代码中,加了两个li,使得我的内容的高度变成40*5=200px,大于div容器的160px,所以,滚动效果出现,而且丝般顺滑,③再回头研究一下,是哪个填充导致了滚动循环时发生一跳一跳的问题,从li到ul之间填充开始,再测试ul到div之间的填充结束,发现问题是:在ul到div之间的填充,导致了滚动效果一跳一跳的,准确的说是:设置ul{margin-bottom:0px;}后,解决了跳的问题,也就是说,问题是ul的下边界和div之间的填充导致了滚动发生跳的现象,分析原因:我们定义的if语句,判断的是我们想要滚动的内容的高度,是不包括滚动的内容和它父容器之间的填充的,因此,当scrollTop向上不断的滚动,scrollTop++到达了我们设置的阈值时,就不会再继续把内容下面的那部分填充继续向上滚动了,而是直接重置滚动内容,这样,原本还剩下的那部分填充内容没有继续向上滚动,而第二次循环已经开始滚动了,就会产生滚动内容向上跳了一下的感觉,实际上,向上跳的那段距离,就是上一次循环剩下的那个没有继续向上滚动的填充,好了,我的解题思路就是上述内容,希望能帮到你,有问题可以在这里继续探讨.

你获取高度干嘛呢。自适应就够了噻、

是指浏览器窗口可视区域的顶部。

怎样让一个div高度自适应浏览器高度 很郁闷的一件事情是：有时你需要一个DIV根据里面的元素自动适应高度，所以，你肯定无法给这个DIV定义一个实际高度。而你随便巢状一个DIV却发现并不适应高度。这事就郁闷了。下面给出一些方法。大致的例子是： <div id="main"> <div id="content"></div> </div>当Content内容多时，即使main设定了高度100%或auto。在不同浏览器下还是不能完好的自动伸展。内容的高度比较高了，但容器main的高度还是不能撑开。我们可以通过三种方法来解决这个问题。 增加一个清除浮动，让父容器知道高度。请注意，清除浮动的容器中有一个空格。 <div id="main"> <div id="content"></div> <div class="page_speeder_611532684"> </div> </div> 增加一个容器，在程式码中存在，但在视觉中不可见。 <div id="main"> <div id="content"></div> <div class="page_speeder_1452110045"></div> </div> 增加一个BR并设定样式为clear:both。 <div id="main"> <div id="content"></div> <br class="page_speeder_1066618161" /> </div>以上三个方法都不是最好的解决方法,因为在程式程式码观念中是提倡尽量不要新增无意义的标签程式码。现在，你可以用下面的方法来实现DIV自适应高度效果#main {height:100%;让一个div高度自适应浏览器高度的方法： 1、获取到window的innerHeight、clientHeight根据这两个引数定义div的高度。 function resizeElementHeight(element) { var height = 0; var body = window.document.body; if (window.innerHeight) { height = window.innerHeight; } else if (body.parentElement.clientHeight) { height = body.parentElement.clientHeight; } else if (body && body.clientHeight) { height = body.clientHeight; } element.style.height = ((height - element.offsetTop) + "px"); } 2、定义div的高度的方法： document.getElementById("yourDiv").height = height；解决方法是： 1, ,body{height:100%} container{position:absolute;:0;left:0;min-height:100%;height:auto}切记，height：auto不能height：100%。用height：100%， 2,当container的内容高度小于浏览器的没出现问题，但当container的内容高度大于浏览器的高度时你会发现container的height并没有随着内容高度而自适应。最后说一下height:100% 并不是没用的东西，， 3,用到不对的位置就是没用的东西了.求助，解决div自适应浏览器高度 我已经加你扣扣了，你这个有好多种办法可以解决<script> function setContentHeight (){ var web_subnav = document.getElementById( "web-subnav" ); var height = document.documentElement.clientHeight - 40 - document.getElementById("web-bd").offsetHeight; web_subnav.style.height = height + "px"; } window.onload = setContentHeight; window.onresize = setContentHeight;</script> 给 web-subnav 和 web-bd 加 id Safari浏览器下怎么实现iframe高度自适应 实现 iframe 的自适应高度，能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象。 <script type=text/javascript> ** iframe自动适应页面 ** 输入你希望根据页面高度自动调整高度的iframe的名称的列表 用逗号把每个iframe的ID分隔. 例如: ["myframe1", "myframe2"]，可以只有一个窗体，则不用逗号。 定义iframe的ID var iframeids=["test"] 如果使用者的浏览器不支援iframe是否将iframe隐藏 yes 表示隐藏，no表示不隐藏 var iframehide="yes" function dyniframesize() { var dyniframe=new Array() for (i=0; i<iframeids.length; i++) { if (document.getElementById) { 自动调整iframe高度 dyniframe[dyniframe.length] = document.getElementById(iframeids); if (dyniframe && !window.opera) { dyniframe.style.display="block" if (dyniframe.contentDocument && dyniframe.contentDocument.body.offsetHeight) 如果使用者的浏览器是NetScape dyniframe.height = dyniframe.contentDocument.body.offsetHeight; else if (dyniframe.Document && dyniframe.Document.body.scrollHeight) 如果使用者的浏览器是IE dyniframe.height = dyniframe.Document.body.scrollHeight; } } 根据设定的引数来处理不支援iframe的浏览器的显示问题 if ((document.all || document.getElementById) && iframehide=="no") { var tempobj=document.all? document.all[iframeids] : document.getElementById(iframeids) tempobj.style.display="block" } } } if (window.addEventListener) window.addEventListener("load", dyniframesize, false) else if (window.attachEvent) window.attachEvent("onload", dyniframesize) else window.onload=dyniframesize </script> 怎样让你的div自适应浏览器和内容两个高度呢？ 之前我只站在我的最高解析度的角度站去写，把container的min-height设定达到最佳效果。却忽略了，如果大于我的最高解析度时，这时container的min-heihgt就不能满足了！给container设height:100%，结果不行，我有点怀疑height:100%根本就没用的东西。在这个问题上，给container设min-heihgt:xpx肯定是不行了。查了很多资料，在他们提到的基本上很多都是,body{height:100%;} container{height:100%;}。依照他们的方法依然没有效果，container改成{height:100%;min-height:100%}一样没有效果。 其实这个问题归结就是让container自适应浏览器和内容两个高度。照常规的，当有背景图的时候我们都会直接放在body层，谁会去考虑container的高度到底是多高?此次专案，有两个背景图， 在我想到这个方法时，也是受到别人相似的方法启发。自己写了一个小的测试 当div为相对定位position:absolute的时候，我们给它设height:100%;它会自适应浏览器的高度。因此，在这我的解决方法是： ,body{height:100%} container{position:absolute;:0;left:0;min-height:100%;height:auto}切记，height：auto不能height：100%。用height：100%，当container的内容高度小于浏览器的没出现问题，但当container的内容高度大于浏览器的高度时你会发现container的height并没有随着内容高度而自适应。最后说一下height:100% 并不是没用的东西，呵呵，用到不对的位置就是没用的东西了！ 好了，自认为是挺不错的一种解决方法......哈哈！我觉得呢碰到的问题越多，学习才会有劲，学到的也会越多，吸收的也会越多。

用JS，怎样通过传递div的id参数来获取div里面包含的HTML代码，并将它们复制到剪贴板？

相对于屏幕的坐标没办法取页面的坐标可以获取offsetTop然后一直加offsetParent的offsetTop你最好使用jquery这种类库来处理，他已经屏蔽了浏览器兼容性问题 补充：元素的页面坐标就是直接访问属性，难道这个代码也要写出来么？你还使用jquery吧，容易使用的多，而且可以直接设置相对于父对象的坐标位置

lt;HTMLgt;lt;HEADgt;lt;TITLEgt;用商家做上传图片预览功能lt;/TITLEgt;lt;scriptgt;functionnbsp;Wa_SetImgAutoSize(img){//varnbsp;img=document.all.img1;//获取图片varnbsp;MaxWidth=200;//设置图片宽度界限varnbsp;MaxHeight=100;//设置图片高度界限varnbsp;HeightWidth=img.offsetHeight/img.offsetWidth;//设置高宽比varnbsp;WidthHeight=img.offsetWidth/img.offsetHeight;//设置宽高比alert(“test“+img.offsetHeight+img.fileSize);if(img.offsetHeightgt;1)nbsp;alert(img.offsetHeight);if(img.readyState!=“complete“){nbsp;nbsp;nbsp;returnnbsp;false;//确保图片完全加载}nbsp;nbsp;if(img.offsetWidthgt;MaxWidth){img.width=MaxWidth;img.height=MaxWidth*HeightWidth;}if(img.offsetHeightgt;MaxHeight){img.height=MaxHeight;img.width=MaxHeight*WidthHeight;}}nbsp;nbsp;functionnbsp;CheckImg(img){nbsp;nbsp;nbsp;varnbsp;message=““;nbsp;nbsp;nbsp;varnbsp;MaxWidth=1;//设置图片宽度界限nbsp;nbsp;nbsp;varnbsp;MaxHeight=1;//设置图片高度界限nbsp;nbsp;nbsp;nbsp;nbsp;if(img.readyState!=“complete“){nbsp;nbsp;nbsp;returnnbsp;false;//确保图片完全加载nbsp;nbsp;nbsp;}nbsp;nbsp;nbsp;if(img.offsetHeightgt;MaxHeight)nbsp;message+=“高度超额：“+img.offsetHeight;nbsp;nbsp;nbsp;if(img.offsetWidthgt;MaxWidth)nbsp;message+=“宽度超额：“+img.offsetWidth;nbsp;nbsp;nbsp;if(message!=““)nbsp;alert(message);}lt;/scriptgt;lt;/HEADgt;lt;BODYgt;lt;imgnbsp;src=“http://www.baidu.com/img/sslm1_logo.gif“nbsp;name=“img1“nbsp;width=“80“nbsp;border=0nbsp;id=“img1“nbsp;gt;lt;brgt;lt;inputnbsp;id=inpnbsp;type=“file“nbsp;onpropertychange=“img1.src=this.value;“gt;lt;/BODYgt;lt;/HTMLgt;另外附上ＰＨＰ的一个取得图片文件信息的函数getimagesize()的一个使用实例:lt;?//nbsp;$arr=getimagesize(“images/album_01.gif“);//nbsp;echonbsp;“arr=“.$arr[3];//nbsp;$strarr=explode(“““,$arr[3]);//nbsp;echonbsp;“strarr=“.$strarr[1];?gt;

不要定义高度就好啦..不要滚动条...那代码忘了..自己查..http://hi.baidu.com/sameyear/

与窗口相关的尺寸有视口宽度clientWidth、浏览器外宽outterWidth、浏览器内宽innerHeight，视口高度clientHeight、浏览器外高outterHeight、浏览器内高innerHeight， 这几个尺寸会因浏览器的不同略有差异。 上述三项测试在Chrome、IE11、Edge、Firefox、Safari 中测试通过。 clientWidth、outterWidth、innerHeight 的值均一致，safari 的 outterWidth 和 outerHeight 均为0。而且 clientWidth、outterWidth、innerHeight 三个值均会随着浏览器地址栏和工具栏的显示或隐藏而发生变化，也就是说浏览器大小、视口是一起发生变化的。 offsetHeight：元素在垂直方向上占用的空间大小，以像素计。包括元素的高度（含padding）、（可见的）水平滚动条高度、 上边框高度和下边框高度。这个高度可以用来检测元素的可见区域。 offsetWidth: 元素在水平方向上占用的空间大小，以像素计。包括元素的宽度（含padding）、（可见的）垂直滚动条的宽度、左边框宽度和右边框宽度。这个高度可以用来检测元素的可见区域。 offsetLeft: 元素的左外边框至包含元素的左内边框之间的像素距离。 offsetTop: 元素的上外边框至包含元素的上内边框之间的像素距离。 clientWidth: 指的是元素内容及其内边距所占据的空间大小，不包含border，滚动条空间不计算在内。 注意：滚动条一般是位于border的内边缘，盖住了padding，但是不占用padding的空间。 scrollHeight: 在没有滚动条的情况下，也就是不含滚动条（滚动条是独立的存在），元素内容的总高度。 scrollWidth: 在没有滚动条的情况下，也就是不含滚动条（滚动条是独立的存在），元素内容的总宽度。 scrollLeft: 被隐藏在内容区域左侧的像素数。通过设置这个属性可以改变元素的滚动位置。 scrollTop: 被隐藏在内容区域上方的像素数。通过设置这个属性可以改变元素的滚动位置。 带有垂直滚动条的页面总高度：document.documentElement.scrollHeight，如果想要获取文档高度，需要找到 scrollHeight 和 clientHeight 中的最大值。 参考文献： 《高级语言程序设计 第三版》

<divid="img"style="position:absolute;left:35px;top:556px;width:120;height:172"><ahref="/"qyml7.htm"><imgborder="0"src="/"lo1.gif"width="140"height="120"></a></p></div><SCRIPTLANGUAGE="JavaScript"><!--BeginvarxPos=20;varyPos=document.body.clientHeight;varstep=1;vardelay=30;varheight=0;varHoffset=0;varWoffset=0;varyon=0;varxon=0;varpause=true;varinterval;img.style.top=yPos;functionchangePos(){width=document.body.clientWidth;height=document.body.clientHeight;Hoffset=img.offsetHeight;Woffset=img.offsetWidth;img.style.left=xPos+document.body.scrollLeft;img.style.top=yPos+document.body.scrollTop;if(yon){yPos=yPos+step;}else{yPos=yPos-step;}if(yPos<0){yon=1;yPos=0;}if(yPos>=(height-Hoffset)){yon=0;yPos=(height-Hoffset);}if(xon){xPos=xPos+step;}else{xPos=xPos-step;}if(xPos<0){xon=1;xPos=0;}if(xPos>=(width-Woffset)){xon=0;xPos=(width-Woffset);}}functionstart(){img.visibility="visible";interval=setInterval("changePos()",delay);}start();//End--></script>

我们要判断一个div上有没有出现水平方向滚动条，只需判断 scrollWidth 是否大于 clientWidth 即可。 当border为0时，使用 offsetHeight - clientHeight 可以得到水平滚动条的宽度（如果有的话）。 我们要判断一个div上有没有出现垂直方向滚动条，只需判断 scrollHeight 是否大于 clientHeight 即可。 当border为0时，使用 offsetWidth - clientWidth 可以得到垂直滚动条的宽度（如果有的话）。 但是在IE浏览器上，某些特殊情况下，虽然 scrollHeight > clientHeight （或 scrollWidth > clientWidth ），也不一定出现滚动条。 我们发现，在这种特殊情况下，虽然父元素的 scrollHeight （258）> clientHeight （257），并且实际内容的高度是 257.92999267578125 ，的确父元素应该出现滚动条，但实际在IE浏览器上没有显示滚动条，这一点我们从数据 父元素的 offsetWidth （840）- clientWidth （840）= 0 也可得出。 通常情况下，我们可以使用 scrollWidth > clientWidth 判断是否出现水平滚动条， scrollHeight > clientHeight 判断是否出现垂直滚动条。 在需要更精确（非 移动端 且非 overflow: hidden 或 overlay ）或要拿到滚动条宽度的情况下，我们可以使用 offsetHeight - clientHeight （水平滚动条） 或 offsetWidth - clientWidth （垂直滚动条），这时，我们不要忘了减去元素的 border 。 有时候情况比较复杂，比如滚动区域宽度是不固定的，我们需要根据是否出现滚动条来设置滚动区域宽度（比如，出现滚动条时给左右加上点击按钮，来切换显示区域）。这时我们就需要来计算内部各元素宽度之和来判断是否出现滚动条。 这里写了个例子，我们来看一下，运行环境为Windows电脑，Chrome浏览器 clientWidth 、 offsetWidth 、 scrollWidth 属性会进行四舍五入并返回整数。当子元素有多个时相加，误差会越来越大。 我们来看一下 getComputedStyle 的值 我们发现内容宽度 341.3753 > 父元素宽度 341.375 getComputedStyle 存在一个小的精度误差。 我们再来看一下 getBoundingClientRect 获取到的宽度 我们发现内容宽度 341.375 与 父元素宽度 341.375 相等。 那我们这里就选用 getBoundingClientRect 吧，但是...... 我们把浏览器放大至 150% 再来看一下 我们使用 getBoundingClientRect 的值计算一下 我们发现得到的值为 341.3541793823242 ，与获取到的父元素的值 341.35418701171875 仍存在一个微小的偏差（这个偏差可能是大，也可能是小）。 因此，我们引入一个微小的忽略值 0.1 ，认为当 父元素的宽度 + 0.1 大于 内容宽度计算结果 时，没有滚动条。 参考文档： MDN Element.clientWidth MDN HTMLElement.offsetWidth MDN Element.scrollWidth MDN Element.clientHeight MDN HTMLElement.offsetHeight MDN Element.scrollHeight

offsetwidth:是元素相对父元素的偏移宽度。等于border+padding+width

浏览器在渲染一个页面的时候，从加载到完成，首先是构建DOM树，然后根据DOM节点的几何属性生成渲染树（ 不包括display:none,head节点但是会包括visibility:hidden节点 ），当渲染树构建完成，页面就根据DOM树开始布局了，渲染树也根据设置的样式对应的渲染这些节点。在这个过程中，回流与dom树和渲染树有关，重绘与渲染树有关。 比如我们删除一个dom节点，修改一个元素的宽高，这样就会导致页面的布局发生变化，DOM树的结构发生变化，引起dom树的重构，重构完成之后就会导致渲染树的重新渲染，这个过程就叫做 回流 当我们修改一个元素的颜色，这并不会影响页面的布局，但是渲染树会重新渲染页面的样式颜色，这就是 重绘 回流的代价是远远大于重绘的，回流一定导致重绘，但是重绘不一定导致回流。 回流常见于元素的尺寸，布局，隐藏等Dom结构发生改变的情况 1.添加或者删除可见的dom元素 2.元素位置改变 3.元素尺寸改变（边距，填充，边框，高度和宽度） 4.内容改变（内容物引起的元素大小发生变化） 5.页面渲染初始化 6.浏览器尺寸改变 7.计算元素的偏移量属性（浏览器为了确保属性值的正确性会回流得到最新值，所以最好使用一个变量记录一下） 重绘常见于元素的颜色的样式发生改变的情况 1.改变字体 2.增加或者移除样式表 3.内容变化（input输入框） 4.激活CSS伪类 5.设置style属性值 6.计算offsetWidth和offsetHeight属性 （1）使用DocumentFragment进行缓存操作，引发一次回流和重绘 （2）使用display:none,只引发两次回流和重绘。道理跟上面的一样。因为 display:none的元素不会出现在render树 （3）使用cloneNode和replaceChild技术，引发一次回流和重绘( 将原始元素拷贝到一个脱离文档流的节点中，修改节点之后，再替换原始元素 ) 现代浏览器都会通过队列化修改并批量执行来优化重排过程。浏览器会将修改操作放入到队列里，直到过了一段时间或者操作达到了一个阈值，才清空队列。但是！ 当你获取布局信息的操作的时候，会强制队列刷新 ，比如当你访问以下属性或者使用以下方法： 改为 以上属性和方法都需要返回最新的布局信息，因此浏览器不得不清空队列，触发回流重绘来返回正确的值。因此，我们在修改样式的时候， 最好避免使用上面列出的属性，他们都会刷新渲染队列 。如果要使用它们，最好将值缓存起来 学习链接： 1. https://www.cnblogs.com/dujingjie/p/5784890.html 2. https://www.cnblogs.com/wanan-01/p/7732340.html 3. https://zhuanlan.zhihu.com/p/22181897 4. https://zhuanlan.zhihu.com/p/52076790

offsetHeight与offsetWidth作用相同，前者是获取元素的高度后者则是宽度．offsetHeight属性可以获取元素的可见高度值。offsetHeight包括边框和内部空白补丁。但超出元素的内容则不被计算。也就是说只返回元素的实际高度值。如果看得着边框，从上边框到下边框的距离则是offsetHeight返回的值。经过测试无论在IE或FF均返回正常。值得一提的是利用css来控制元素的高度，在IE里会被撑大，FF里则不会，但返回的值是正确的！offsetHeight虽不是W3C标准属性，但广泛被浏览器支持。

jquery的outerHeight()方法就是原生JS的offsetHeight;

offsetHeight的描述不准

document.body.clientHeight

<input type="button" value="点击" onclick="get()"><input type="text" id="_hidName"><script language="javascript"> <!-- function get(){ var t=document.getElementById("_hidName").offsetTop;var l=document.getElementById("_hidName").offsetLeft;alert("top="+t+"\nleft="+l);}</script>

Javascript:网页可见区域宽： document.body.clientWidth网页可见区域高： document.body.clientHeight网页可见区域宽： document.body.offsetWidth (包括边线的宽)网页可见区域高： document.body.offsetHeight (包括边线的高)网页正文全文宽： document.body.scrollWidth网页正文全文高： document.body.scrollHeight网页被卷去的高： document.body.scrollTop网页被卷去的左： document.body.scrollLeft网页正文部分上： window.screenTop网页正文部分左： window.screenLeft屏幕分辨率的高： window.screen.height屏幕分辨率的宽： window.screen.width屏幕可用工作区高度： window.screen.availHeight屏幕可用工作区宽度： window.screen.availWidthJQuery:$(document).ready(function(){alert($(window).height()); //浏览器当前窗口可视区域高度alert($(document).height()); //浏览器当前窗口文档的高度alert($(document.body).height());//浏览器当前窗口文档body的高度alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding marginalert($(window).width()); //浏览器当前窗口可视区域宽度alert($(document).width());//浏览器当前窗口文档对象宽度alert($(document.body).width());//浏览器当前窗口文档body的宽度alert($(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度 包括border padding margin})

精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidthscrollHeight:获取对象的滚动高度。scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离scrollWidth:获取对象的滚动宽度offsetHeight:获取对象相对于版面或由父坐标offsetParent属性指定的父坐标的高度offsetLeft:获取对象相对于版面或由offsetParent属性指定的父坐标的计算左侧位置offsetTop:获取对象相对于版面或由offsetTop属性指定的父坐标的计算顶端位置event.clientX相对文档的水平座标event.clientY相对文档的垂直座标event.offsetX相对容器的水平坐标event.offsetY相对容器的垂直坐标document.documentElement.scrollTop垂直方向滚动的值event.clientX+document.documentElement.scrollTop相对文档的水平座标+垂直方向滚动的量实现代码<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><title>请调整浏览器窗口</title><metahttp-equiv="content-type"content="text/html;charset=gb2312"></meta></head><body><h2align="center">请调整浏览器窗口大小</h2><hr/><formaction="#"method="get"name="form1"id="form1"><!--显示浏览器窗口的实际尺寸-->浏览器窗口的实际高度:<inputtype="text"name="availHeight"size="4"/><br/>浏览器窗口的实际宽度:<inputtype="text"name="availWidth"size="4"/><br/></form><scripttype="text/javascript"><!--varwinWidth=0;varwinHeight=0;functionfindDimensions()//函数：获取尺寸{//获取窗口宽度if(window.innerWidth)winWidth=window.innerWidth;elseif((document.body)&&(document.body.clientWidth))winWidth=document.body.clientWidth;//获取窗口高度if(window.innerHeight)winHeight=window.innerHeight;elseif((document.body)&&(document.body.clientHeight))winHeight=document.body.clientHeight;//通过深入Document内部对body进行检测，获取窗口大小if(document.documentElement&&document.documentElement.clientHeight&&document.documentElement.clientWidth){winHeight=document.documentElement.clientHeight;winWidth=document.documentElement.clientWidth;}//结果输出至两个文本框document.form1.availHeight.value=winHeight;document.form1.availWidth.value=winWidth;}findDimensions();//调用函数，获取数值window.onresize=findDimensions;//--></script></body></html>

因为你没有把层的位置绝对化(position: absolute;)，left是不起作用的.下面是我写的一个例题，希望能给你参考！<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><HTML><HEAD><TITLE>AAAAAAAA</TITLE><META HTTP-EQUIV="Content-Type" CONTENT="text/html" charset="UTF-8"></HEAD><style><!--.div{position: absolute;border: 2px solid red;background-color: #EFEFEF;line-height:90px;font-size:12px;z-index:1000;}--></style><BODY><div id="Javascript.Div1" class="div" style="width: 240px; height:90px" align="center">正中...</div><SCRIPT LANGUAGE="JavaScript">function sc1(){document.getElementById("Javascript.Div1").style.top= document.documentElement.scrollTop+(document.documentElement.clientHeight-document.getElementById("Javascript.Div1").offsetHeight)/2document.getElementById("Javascript.Div1").style.left= document.documentElement.scrollLeft+(document.documentElement.clientWidth-document.getElementById("Javascript.Div1").offsetWidth)/2;}</SCRIPT><div id="Javascript.Div2" class="div" style="width: 240px; height:90px;" align="center">左上...</div><SCRIPT LANGUAGE="JavaScript">function sc2(){document.getElementById("Javascript.Div2").style.top=document.documentElement.scrollTopdocument.getElementById("Javascript.Div2").style.left=document.documentElement.scrollLeft;}</SCRIPT><div id="Javascript.Div3" class="div" style="width: 240px; height:90px;" align="center">左下...</div><SCRIPT LANGUAGE="JavaScript">function sc3(){document.getElementById("Javascript.Div3").style.top= document.documentElement.scrollTop+document.documentElement.clientHeight-document.getElementById("Javascript.Div3").offsetHeight;document.getElementById("Javascript.Div3").style.left=document.documentElement.scrollLeft;}</SCRIPT><div id="Javascript.Div4" class="div" style="width: 240px; height:90px;" align="center">右上...</div><SCRIPT LANGUAGE="JavaScript">function sc4(){document.getElementById("Javascript.Div4").style.top=document.documentElement.scrollTop;document.getElementById("Javascript.Div4").style.left= document.documentElement.scrollLeft+document.documentElement.clientWidth-document.getElementById("Javascript.Div4").offsetWidth;}</SCRIPT><div id="Javascript.Div5" class="div" style="width: 240px; height:90px;" align="center">右下...</div><SCRIPT LANGUAGE="JavaScript">function sc5(){document.getElementById("Javascript.Div5").style.top= document.documentElement.scrollTop+document.documentElement.clientHeight-document.getElementById("Javascript.Div5").offsetHeight;document.getElementById("Javascript.Div5").style.left= document.documentElement.scrollLeft+document.documentElement.clientWidth-document.getElementById("Javascript.Div5").offsetWidth;;}</SCRIPT><SCRIPT LANGUAGE="JavaScript"><!--function scall(){sc1();sc2();sc3();sc4();sc5();}window.onscroll=scall;window.onresize=scall;window.onload=scall;//--></SCRIPT><div style="position: absolute; top: 0; left: 0; width: 10000px; height: 4000px;"></div></BODY></HTML>最后希望把分给我，有什么事可以问我！40375250

scrollTop是指某个可滚动区块向下滚动的距离，比如向下滚动了10个像素，那么这个元素的scrollTop属性值就是10；offsetTop则是元素的上边框与父元素的上边框的绝对距离。两者描述的不是同一个东西，所以没有可比性。

要写JS代码~~~如：<SCRIPT language="javascript">var x=50,y=60;var xin=true ,yin=true;var step=1;var delay=10;function floatAD(){var l=t=0;var r=document.body.offsetWidth-document.getElementById("fly").offsetWidth;var b=document.body.offsetHeight-document.getElementById("fly").offsetHeight+document.body.scrollTop;document.getElementById("fly").style.left=x;document.getElementById("fly").style.top=y;x=x+step*(xin?1:-1);if(x<l){xin=true;x=l;}if(x>r){xin=false;x=r;}y=y+step*(yin?1:-1);if(y<t){yin=true;y=t;}if(y>b){yin=false;y=b;}setTimeout("floatAD()",delay);}</SCRIPT>乃只需要在<body></body>中插入一张由<div id="fly"><img src="图片"></div>就能实现图片的漂浮

这个问题一般常见于IE6中，IE6中对高度的解释有bug，这个网上探讨了很多，所以你可以判断一下是否为IE6，如果是IE6的话，高度要设置的小些，否则偏大

跨域问题。js在控制iframe中的东西时，是需要在相同域名下的两个页面的。也就是说，父网页和iframe中的网页要是同一个域名下的网页才行。

safari 和 google都属于Webkit核心的浏览器改js引擎不支持clientHeight;clientWidth属性所以就不正常可以用offsetWidth,offsetHeight来替代

具体解决方案如下： 一、IE和FF下document.body对象的clientHeight，offsetHeight，scrollHeight属性的差别。 clientHeight 在IE和FF下，该属性没什么差别，都是指浏览器的可视区域，即除去浏览器的那些工具栏状态栏剩下的页面展示空间的高度。 offsetHeight 在IE下，offsetHeight也是浏览器可视区域的高（包括边线） 在FF下，offsetHeight是页面具体内容的高度 scrollHeight 在IE下，scrollHeight 是页面具体内容的高度，可以小于clientHeight 在FF下，scrollHeight 是网页内容高度，不过最小值是clientHeight 二、下面是跨浏览器取得当前页面的高度的解决方法。 复制代码 代码如下:function getPageSize() { var body = document.documentElement； var bodyOffsetWidth = 0; var bodyOffsetHeight = 0; var bodyScrollWidth = 0; var bodyScrollHeight = 0; var pageDimensions = [0,0]; pageDimensions[0]=body.clientHeight; pageDimensions[1]=body.clientWidth; bodyOffsetWidth=body.offsetWidth; bodyOffsetHeight=body.offsetHeight; bodyScrollWidth=body.scrollWidth; bodyScrollHeight=body.scrollHeight; if(bodyOffsetHeight > pageDimensions[0]) { pageDimensions[0]=bodyOffsetHeight; } if(bodyOffsetWidth > pageDimensions[1]) { pageDimensions[1]=bodyOffsetWidth; } if(bodyScrollHeight > pageDimensions[0]) { pageDimensions[0]=bodyScrollHeight; } if(bodyScrollWidth > pageDimensions[1]) { pageDimensions[1]=bodyScrollWidth; } return pageDimensions; }三、页面上必须放置一个div，作为遮罩层，下面是这个遮罩层的css样式。 复制代码 代码如下:.lockDiv { position:absolute; left:0; top:0; height:0; width:0; border:2 solid red; display:none; text-align:center; background-color:#DBDBDB; filter:Alpha(opacity=60); }四、在客户端使用下面的javascript用遮罩层将整个页面封闭。 复制代码 代码如下:var sandglassSpan = 1; var timeHdl; function DisablePage() { var ctrlSandglass = document.getElementById("divSandglass"); if(sandglassSpan==0) { window.clearTimeout(timeHdl); ctrlSandglass.style.display = "none"; document.body.style.cursor = "auto"; sandglassSpan = 1; } else { document.body.style.cursor = "wait"; var pageDimensions = getPageSize(); ctrlSandglass.style.top = 0; ctrlSandglass.style.left = 0; ctrlSandglass.style.height = pageDimensions[0]; ctrlSandglass.style.width = pageDimensions[1]; ctrlSandglass.style.display = "block"; timeHdl = window.setTimeout(DisablePage,200); } }五、如果页面上使用了ASP.net的Validator控件，那么应该使用如下的javascript。 复制代码 代码如下:var sandglassSpan = 1; var timeHdl; function DisablePageHaveValidator() { var ctrlSandglass = document.getElementById("divSandglass"); if(false == Page_IsValid) { sandglassSpan = 0; } if(sandglassSpan==0) { window.clearTimeout(timeHdl); ctrlSandglass.style.display = "none"; document.body.style.cursor = "auto"; sandglassSpan = 1; } else { document.body.style.cursor = "wait"; ctrlSandglass.style.display = "block"; var pageDimensions = getPageSize(); ctrlSandglass.style.top = 0; ctrlSandglass.style.left = 0; ctrlSandglass.style.height = pageDimensions[0]; ctrlSandglass.style.width = pageDimensions[1]; timeHdl = window.setTimeout(DisablePageHaveValidator, 200); } }

这个脚本很糟糕，放眼望去全是Bug，不工作也是正常的，如果修改它就相当与重做。

图片滚动代码 (从右向左滚动) <marquee scrollamount=1 scrolldelay=3 valign=middle behavior="scroll"> <img border="0" src=" http://要滚动的图片地址1"> <img border="0" src=" http://要滚动的图片地址2"> </marquee> 图片滚动代码 (从下往上滚动) <marquee onMouseOver="this.stop()" onMouseOut="this.start()" align=center direction=up scrollamount=1 scrolldelay=3 valign=middle behavior="scroll"> <img border="0" src=" http://要滚动的图片地址1"> <img border="0" src=" http://要滚动的图片地址2"> <marquee ONMOUSEOUT=this.scrollDelay=1 ONMOUSEOVER=this.scrollDelay=600 scrollamount=1 SCROLLDELAY=1 border=0 direction=up scrolldelay=70 width=180 height=130 align=middle>把图片的连接地址写在这里</marquee>1.direction属性:决定文本的滚动方向，分为向左left和向右right，up和down默认状态向左。<marquee direction=left>从右向左滚动</marquee><marquee direction=right>从左向右滚动</marquee>2.behavior属性:指定文本的滚动方式，分为三种:Scroll:从一端消失后，在另一端出现并继续滚动。<marquee behavior=scroll>一圈一圈地滚动</marquee>Slide:从一端滚动，接触到另一端后停止<marquee behaviro=slide>只滚动一次就停止</marquee>Alternate:从一端滚动到另一端后，反向滚动。<marquee behavior=alternate>来回滚动</marquee>direction=up（left、right、down） 这个属性可以更改，这样就可以实现上下左右了 但是.我建议用一种无缝的文字滚动.这样的效果会比较好看.而用marquee就没那么好了方法代码 先介绍一下它的实现思路：一个设定宽度并且隐藏超出它宽度的内容的容器demo，里面放demo1和demo2，demo1是滚动内容,demo2为demo1的直接克隆，通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的，当滚动至demo1与demo2的交界处时直接跳回初始位置，因为demo1与demo2一样，所以分不出跳动的瞬间，从而达到“无缝”滚动的目的。先了解一下对象的几个的属性：innerHTML:设置或获取位于对象起始和结束标签内的 HTMLscrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离scrollWidth:获取对象的滚动宽度offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 offsetWidth:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度向上滚动的代码： <div id=demo style=overflow:hidden;height:400;width:160;background:#214984;color:#ffffff><table align=top cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top><img src="pic/1.jpg" width="156" height="200" /><br><img src="pic/2.jpg" width="160" height="198" /><br><img src="pic/3.jpg" width="155" height="200" /><br><img src="pic/4.jpg" width="157" height="200" /></td></tr><tr><td id=demo2 valign=top></td></tr></table></div><script>var speed=30demo2.innerHTML=demo1.innerHTML//克隆demo1为demo2function Marquee(){if(demo2.offsetHeight-demo.scrollTop<=0)//当滚动至demo1与demo2交界时demo.scrollTop-=demo1.offsetHeight//demo跳到最顶端else{demo.scrollTop++}}var MyMar=setInterval(Marquee,speed)//设置定时器demo.onmouseover=function() {clearInterval(MyMar)}//鼠标移上时清除定时器达到滚动停止的目的demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}//鼠标移开时重设定时器</script>向下滚动： <div id=demo style=overflow:hidden;height:400;width:160;background:#214984;color:#ffffff><table align=top cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top><img src="pic/1.jpg" width="156" height="200" /><br><img src="pic/2.jpg" width="160" height="198" /><br><img src="pic/3.jpg" width="155" height="200" /><br><img src="pic/4.jpg" width="157" height="200" /></td></tr><tr><td id=demo2 valign=top></td></tr></table></div><script>var speed=30demo2.innerHTML=demo1.innerHTMLfunction Marquee(){if(demo.scrollTop<=0)demo.scrollTop+=demo2.offsetHeightelse{demo.scrollTop--}}var MyMar=setInterval(Marquee,speed)demo.onmouseover=function() {clearInterval(MyMar)}demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}</script>向左滚动： <div id=demo style=overflow:hidden;height:200;width:500;background:#214984;color:#ffffff><table align=left cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top><img src="pic/1.jpg" width="156" height="200" /><img src="pic/2.jpg" width="160" height="198" /><img src="pic/3.jpg" width="155" height="200" /><img src="pic/4.jpg" width="157" height="200" /></td><td id=demo2 valign=top></td></tr></table></div><script>var speed=30demo2.innerHTML=demo1.innerHTMLfunction Marquee(){if(demo2.offsetWidth-demo.scrollLeft<=0)demo.scrollLeft-=demo1.offsetWidthelse{demo.scrollLeft++}}var MyMar=setInterval(Marquee,speed)demo.onmouseover=function() {clearInterval(MyMar)}demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}</script>向右滚动： <div id=demo style=overflow:hidden;height:200;width:500;background:#214984;color:#ffffff><table align=left cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top><img src="pic/1.jpg" width="156" height="200" /><img src="pic/2.jpg" width="160" height="198" /><img src="pic/3.jpg" width="155" height="200" /><img src="pic/4.jpg" width="157" height="200" /></td><td id=demo2 valign=top></td></tr></table></div><script>var speed=30demo2.innerHTML=demo1.innerHTMLfunction Marquee(){if(demo.scrollLeft<=0)demo.scrollLeft+=demo2.offsetWidthelse{demo.scrollLeft--}}var MyMar=setInterval(Marquee,speed)demo.onmouseover=function() {clearInterval(MyMar)}demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}</script>

Javascript设计网页中的下拉菜单 在网页制作时，为了更好地组织信息，使显示的信息分类明确、层次清晰，网页制作者往往费尽心机。常用的方法有用树型结构显示信息，用表格进行网页布局，用框架(frame)组织页面等等。但对于习惯了Windows操作系统的用户来说，利用菜单操作可以算是最自然的方法了。下面我们就来看一下怎样在网页中设计下拉式菜单。 下拉式菜单由若干个显示在窗口顶部的主菜单条和各个菜单条下面的子菜单组成。每个子菜单往往还包含几个子菜单项。通常，只有菜单条显示在窗口中，并且当鼠标指针指向菜单条时，菜单条的子菜单才显示出来。当鼠标指针离开菜单时，子菜单则隐藏起来，回到只显示主菜单条的状态。 根据上述下拉菜单的特点，我们就可以开始在网页中制作下拉菜单了。我们在网页的顶部放置一个区域，用于显示主菜单条，每一个主菜单条作为一个超链接横向置于该区域中，当然除非菜单项没有子菜单，一般情况下这里的超链接不指向任何地址，只用它来激活子菜单。区域的格式见程序1。CODE: <DIV ID="pad" ……> <A ID="pad1" onmouseout="mouseout(); hideMenu();" onmouseover="mouseover(); doMenu("idpad1");" onclick="window.event.returnValue=false;">菜单项一</A> <A ID="pad2" onmouseout="mouseout(); hideMenu();" onmouseover="mouseover(); doMenu("idpad2");" onclick="window.event.returnValue=false;">菜单项二</A> …… </DIV> 接着，我们根据主菜单条的个数定义相应的子菜单，为每个子菜单定义一个区域，该区域中第一个元素是一条横线，然后每个子菜单作为一个超链接置于该区域中，由于子菜单纵向排列，每个超链接后加<BR>换行。当然这个区域现在还不能显示出来，但当它被激活时，其显示位置应位于其他对象之上，所以其style属性置为STYLE=" display:none; z-index:9;"。 注意每个超链接的ID均应与其主菜单的ID相同，以便于统一处理。格式见程序2。CODE: <SPAN ID="idpad1" STYLE="display:none; z-index:9;" onmouseout="hideMenu();"> <HR STYLE="position:absolute;left:0;top:0;color:white" SIZE=1> <DIV > <A ID="pad1" HREF="11.htm" onmouseout="mouseout();" onmouseover="mouseover()"> 子菜单项一一</A><BR> <A ID="pad1" HREF="12.htm" onmouseout="mouseout();" onmouseover="mouseover()"> 子菜单项一二</A><BR> <HR STYLE="color:white" SIZE=1><!--如有必要可以用横线对子菜单分组--> <A ID="pad1" HREF="13.htm" onmouseout="mouseout();" onmouseover="mouseover()"> 子菜单项一三</A><BR> …… </DIV> </SPAN> 经过上面的步骤，下拉菜单的格式已经定义好了，下面的任务就是控制这些子菜单的显示和隐藏。 当鼠标移动到主菜单条上时，应显示其子菜单，我们通过执行doMenu(MenuID)响应主菜单的onmouseover事件来完成。过程的参数MenuID是代表子菜单的区域的ID，过程执行时先设置window.event. cancelBubble = true，并计算子菜单显示的位置，包括左上角和右下角坐标。然后执行下列语句来显示子菜单所在区域：CODE: CurMenu.style.clip = "rect(0 0 0 0) ";CurMenu.style.display = "block"; 当鼠标移出主菜单时有两种情况，一种情况是鼠标在子菜单及其主菜单之间移动，这时不能隐藏子菜单；另一种情况是鼠标移出了子菜单及其主菜单的区域，这时需要隐藏子菜单。我们通过执行hideMenu()响应主菜单的onmouseout，同时执行hideMenu()响应子菜单所在区域的onmouseout事件来完成。 网页中的另外两个函数mouseout() 和mouseover() 的功能很简单，分别用于处理鼠标移动时菜单项的颜色变化。 完整的源代码参见《电子与电脑》网站www.pccomputing.com.cn。 网页浏览的效果如图1所示，运行环境为IE4.0以上版本。 （图注WANGYE） 图1CODE: <HTML> <HEAD> <TITLE>网页中的下拉菜单</TITLE> </HEAD> <SCRIPT LANGUAGE="JavaScript" > var IsDroped =false; function mouseout() { window.event.srcElement.style.color = "white";//鼠标移开时置为白色 } function mouseover() { window.event.srcElement.style.color = "red";//鼠标进入时置为红色//鼠标进入时置为红色 } function doMenu(MenuID) { var CurMenu = document.all(MenuID); //为避免闪烁,如果下拉菜单已经显示则不重画. if (IsDroped==true) { window.event.cancelBubble = true; return false; } window.event.cancelBubble = true; TempMenu = CurMenu; //计算下拉菜单的位置 x = window.event.srcElement.offsetLeft + window.event.srcElement.offsetParent.offsetLeft; x2 = x + window.event.srcElement.offsetWidth; y = pad.offsetHeight; CurMenu.style.top = y; CurMenu.style.left = x; CurMenu.style.clip = "rect(0 0 0 0)"; CurMenu.style.display = "block"; //延时2毫秒后再显示菜单,保证ToolbarMenu.offsetHeight有值,避免从主菜单移向下拉菜单时下拉菜单消失. window.setTimeout("showMenu()", 2); return true; } function showMenu() { y2 = y + TempMenu.offsetHeight; TempMenu.style.clip = "rect(auto auto auto auto)"; IsDroped =true;//下拉菜单已经显示 } function hideMenu() { //如果在下拉菜单的范围之内移动则不隐藏. cY = event.clientY + document.body.scrollTop; if (cY>=y && cY<y2 && event.clientX >= (x+5) && event.clientX <= x2 || cY>1 && cY<y && event.clientX >= (x+5) && event.clientX <= x2-10) { window.event.cancelBubble = true; return;} //隐藏 TempMenu.style.display = "none"; window.event.cancelBubble = true; IsDroped =false; } </SCRIPT> <body topmargin=0 leftmargin=0 marginheight=0 marginwidth=0> <DIV ID="menu" STYLE="position:absolute;background-color:white;width:100%;top:0;left:0;"> <DIV ID="pad" STYLE="position:relative;height:20;width:100%;font:bold 11pt 宋体;background-color:#007FFF;color:white;"> <A TARGET="_top" TITLE="" ID="pad1" onmouseout="mouseout(); hideMenu();" onmouseover="mouseover(); doMenu("idpad1");"> 菜单项一 </A> <SPAN style="color:white"> </SPAN> <A TARGET="_top" TITLE="" ID="pad2" onmouseout="mouseout(); hideMenu();" onmouseover="mouseover(); doMenu("idpad2");" onclick="window.event.returnValue=false;"> 菜单项二 </A> </DIV> </DIV> <SPAN ID="idpad1" STYLE="display:none;position:absolute;width:140;background-color:#007FFF;padding-top:0;padding-left:0;padding-bottom:20;z-index:9;" onmouseout="hideMenu();"> <HR STYLE="position:absolute;left:0;top:0;color:white" SIZE=1> <DIV STYLE="position:relative;left:0;top:8;"> <A ID="pad1" STYLE="text-decoration:none;cursor:hand;font:bold 11pt 宋体;color:white" HREF="11.htm" TARGET="_top" onmouseout="mouseout();" onmouseover="mouseover()"> 子菜单项一一 </A><BR> <A ID="pad1" STYLE="text-decoration:none;cursor:hand;font:bold 11pt 宋体;color:white" HREF="12.htm" TARGET="_top" onmouseout="mouseout();" onmouseover="mouseover()"> 子菜单项一二 </A><BR> <A ID="pad1" STYLE="text-decoration:none;cursor:hand;font:bold 11pt 宋体;color:white" HREF="13.htm" TARGET="_top" onmouseout="mouseout();" onmouseover="mouseover()"> 子菜单项一三 </A> </DIV> </SPAN> <SPAN ID="idpad2" STYLE="display:none;position:absolute;width:140;background-color:#007FFF;padding-top:0;padding-left:0;padding-bottom:20;z-index:9;" onmouseout="hideMenu();"> <HR STYLE="position:absolute;left:0;top:0;color:white" SIZE=1> <DIV STYLE="position:relative;left:0;top:8;"> <A ID="pad2" STYLE="text-decoration:none;cursor:hand;font:bold 11pt 宋体;color:white" HREF="21.htm" TARGET="_top" onmouseout="mouseout();" onmouseover="mouseover()"> 子菜单项二一</A><BR> <A ID="pad2" STYLE="text-decoration:none;cursor:hand;font:bold 11pt 宋体;color:white" HREF="22.htm" TARGET="_top" onmouseout="mouseout();" onmouseover="mouseover()"> 子菜单项二二</A><BR> <A ID="pad2" STYLE="text-decoration:none;cursor:hand;font:bold 11pt 宋体;color:white" HREF="23.htm" TARGET="_top" onmouseot="mouseout();" onmouseover="mouseover()"> 子菜单项二三</A><BR> <HR STYLE="color:white" SIZE=1><!--分隔行--> <A ID="pad2" STYLE="text-decoration:none;cursor:hand;font:bold 11pt 宋体;color:white" onclick="parent.close()" onmouseout="mouseout();" onmouseover="mouseover()"> 退出系统</A> </DIV> </SPAN> <!--页面的其它内容--> </BODY> </HTML>

document.documentElement.clientHeight$(window).height() 可视范围window.screen.availHeight 窗口大小不包括滚动条window.screen.height 窗口大小$(document.body).height() 窗口大小document.body.scrollHeight 文档大小+paddingdocument.body.clientHeight 文档大小+paddingdocument.body.offsetHeight 文档大小+padding+border$(document).height() 文档大小+padding+border+margin$(document.body).outerHeight(true) 文档大小+padding+border+margin$("#x").position().top 相对(父元素)位置$("#x").offset().top 绝对位置$(document).scrollTop() 获取滚动条到顶部的垂直高度