JS中height、clientHeight、scrollHeight、offsetHeight区别

JS中height、clientHeight、scrollHeight、offsetHeight区别我们来实现test中的onclick事件  functionjustAtest()    {       vartest= document.getElementById(“test”);       vartest2=document.getElementById(“test2”)       vartest3=document.getElementB

大家好,又见面了,我是你们的朋友全栈君。

 JS中height、clientHeight、scrollHeight、offsetHeight区别

 

我们来实现test中的onclick事件

JS中height、clientHeight、scrollHeight、offsetHeight区别
   function justAtest()
JS中height、clientHeight、scrollHeight、offsetHeight区别    

{

JS中height、clientHeight、scrollHeight、offsetHeight区别        var test
= document.getElementById(test);
JS中height、clientHeight、scrollHeight、offsetHeight区别        var test2
=document.getElementById(test2)
JS中height、clientHeight、scrollHeight、offsetHeight区别        var test3
=document.getElementById(test3)
JS中height、clientHeight、scrollHeight、offsetHeight区别        var test4
=document.getElementById(test4);     
JS中height、clientHeight、scrollHeight、offsetHeight区别        alert(test4.style.height); 
JS中height、clientHeight、scrollHeight、offsetHeight区别        alert(test3.style.height);    
JS中height、clientHeight、scrollHeight、offsetHeight区别        alert(test2.style.height)
JS中height、clientHeight、scrollHeight、offsetHeight区别        alert(test.style.height);      
JS中height、clientHeight、scrollHeight、offsetHeight区别        alert(document.body.style.height) 
JS中height、clientHeight、scrollHeight、offsetHeight区别     }


height :其实Height高度跟其他的高度有点不一样,在javascript中它是属于对象的style对象属性中的一个成员,它的值是一个字符类型的,而另外三个高度的值是int类型的,它们是对象的属性.因此这样document.body.height就会提示undenifine,而必须写成document.body.style.height
上面的脚本将依次弹出700px,550px,600px,500px,1000px.height是最简单的了,不必去考虑是否有滚动条及边框等.因此也不做多解释了.
然后我们将脚本换下

JS中height、clientHeight、scrollHeight、offsetHeight区别
     function justAtest()
JS中height、clientHeight、scrollHeight、offsetHeight区别    

{

JS中height、clientHeight、scrollHeight、offsetHeight区别        var test
= document.getElementById(test);
JS中height、clientHeight、scrollHeight、offsetHeight区别        var test2
=document.getElementById(test2)
JS中height、clientHeight、scrollHeight、offsetHeight区别        var test3
=document.getElementById(test3)
JS中height、clientHeight、scrollHeight、offsetHeight区别        var test4
=document.getElementById(test4);     
JS中height、clientHeight、scrollHeight、offsetHeight区别        alert(test4.clientHeight); 
JS中height、clientHeight、scrollHeight、offsetHeight区别        alert(test3.clientHeight);    
JS中height、clientHeight、scrollHeight、offsetHeight区别        alert(test2.clientHeight)
JS中height、clientHeight、scrollHeight、offsetHeight区别        alert(test.clientHeight);      
JS中height、clientHeight、scrollHeight、offsetHeight区别        alert(document.body.clientHeight) 
JS中height、clientHeight、scrollHeight、offsetHeight区别     }

运行后火狐的结果为:700,550,583,483,1000
           IE的结果为:700 ,550,583,483,1000
IE与火狐下的运行结果是一致的.下面来看下clientHeight的定义.
clientHeight:可见区域的宽度,不包括boder的宽度,如果区域内带有滚动条,还应该减去横向滚动条不可用的高度,正常的是17px,其实就是滚动条的可滚动的部分了,其实clientHeight与height的高度差不多,如果不带滚动条的话他们的值都是一样的,如果带有滚动条的话就会比height值少17px;火狐与IE下均为一致.
接着我们来看scrollHeight

JS中height、clientHeight、scrollHeight、offsetHeight区别
 function justAtest()
JS中height、clientHeight、scrollHeight、offsetHeight区别    

{

JS中height、clientHeight、scrollHeight、offsetHeight区别        var test
= document.getElementById(test);
JS中height、clientHeight、scrollHeight、offsetHeight区别        var test2
=document.getElementById(test2)
JS中height、clientHeight、scrollHeight、offsetHeight区别        var test3
=document.getElementById(test3)
JS中height、clientHeight、scrollHeight、offsetHeight区别        var test4
=document.getElementById(test4);     
JS中height、clientHeight、scrollHeight、offsetHeight区别        alert(test4.scrollHeight); 
JS中height、clientHeight、scrollHeight、offsetHeight区别        alert(test3.scrollHeight);    
JS中height、clientHeight、scrollHeight、offsetHeight区别        alert(test2.scrollHeight)
JS中height、clientHeight、scrollHeight、offsetHeight区别        alert(test.scrollHeight);      
JS中height、clientHeight、scrollHeight、offsetHeight区别        alert(document.body.scrollHeight) 
JS中height、clientHeight、scrollHeight、offsetHeight区别     }

运行后火狐的结果为:700,552,700,602,1002
           IE的结果为: 15, 15 , 700,602, 552
scrollHeight:这个属性就比较麻烦了,因为它们在火狐跟IE下简直差太多了..
在火狐下还很好理解,它其实就是滚动条可滚动的部分还要加上boder的高度还要加上横向滚动条不可用的高度,与clientHeight比起来,多个border的高度跟横向滚动条不可用的高度.

在IE中 scrollHeight确是指这个对象它所包含的对象的高度加上boder的高度和marging,如果它里面没有包含对象或者这个对象的高度值未设置,那么它的值将为15
最后我们来看offsetHeight

JS中height、clientHeight、scrollHeight、offsetHeight区别
     function justAtest()
JS中height、clientHeight、scrollHeight、offsetHeight区别    

{

JS中height、clientHeight、scrollHeight、offsetHeight区别        var test
= document.getElementById(test);
JS中height、clientHeight、scrollHeight、offsetHeight区别        var test2
=document.getElementById(test2)
JS中height、clientHeight、scrollHeight、offsetHeight区别        var test3
=document.getElementById(test3)
JS中height、clientHeight、scrollHeight、offsetHeight区别        var test4
=document.getElementById(test4);     
JS中height、clientHeight、scrollHeight、offsetHeight区别        alert(test4.offsetHeight); 
JS中height、clientHeight、scrollHeight、offsetHeight区别        alert(test3.offsetHeight);    
JS中height、clientHeight、scrollHeight、offsetHeight区别        alert(test2.offsetHeight)
JS中height、clientHeight、scrollHeight、offsetHeight区别        alert(test.offsetHeight);      
JS中height、clientHeight、scrollHeight、offsetHeight区别        alert(document.body.offsetHeight) 
JS中height、clientHeight、scrollHeight、offsetHeight区别     }


offsetHeight:
FF:700,552,602,502,1002
IE:700,552,602,502,1002
这个属性好办,因为在测试中IE跟火狐的结果是一样的,均表示是自身的高度,如果有设置boder的话还应该加上boder的值,因为除了test4这个div外,其他的div均有设置border=1px,所以552=550+2,其他的均一样.

嘿嘿,综上所述,clientHeight与height的区别是如果有滚动条时应减去滚动条的17px不可用部分,offsetHeight与Height的区别是增加了boder的高度,ScrollHeihgt与Height的区别是火狐下与offsetHeight一致,IE下如上所述.

相信你了解了这个,对width,clientWidth,scrollWidth,offsetWidth已经不陌生了吧,只不过一个是长一个是宽的问题了.

 

 

我们来实现test中的onclick事件

JS中height、clientHeight、scrollHeight、offsetHeight区别
   function justAtest()
JS中height、clientHeight、scrollHeight、offsetHeight区别    

{

JS中height、clientHeight、scrollHeight、offsetHeight区别        var test
= document.getElementById(test);
JS中height、clientHeight、scrollHeight、offsetHeight区别        var test2
=document.getElementById(test2)
JS中height、clientHeight、scrollHeight、offsetHeight区别        var test3
=document.getElementById(test3)
JS中height、clientHeight、scrollHeight、offsetHeight区别        var test4
=document.getElementById(test4);     
JS中height、clientHeight、scrollHeight、offsetHeight区别        alert(test4.style.height); 
JS中height、clientHeight、scrollHeight、offsetHeight区别        alert(test3.style.height);    
JS中height、clientHeight、scrollHeight、offsetHeight区别        alert(test2.style.height)
JS中height、clientHeight、scrollHeight、offsetHeight区别        alert(test.style.height);      
JS中height、clientHeight、scrollHeight、offsetHeight区别        alert(document.body.style.height) 
JS中height、clientHeight、scrollHeight、offsetHeight区别     }


height :其实Height高度跟其他的高度有点不一样,在javascript中它是属于对象的style对象属性中的一个成员,它的值是一个字符类型的,而另外三个高度的值是int类型的,它们是对象的属性.因此这样document.body.height就会提示undenifine,而必须写成document.body.style.height
上面的脚本将依次弹出700px,550px,600px,500px,1000px.height是最简单的了,不必去考虑是否有滚动条及边框等.因此也不做多解释了.
然后我们将脚本换下

JS中height、clientHeight、scrollHeight、offsetHeight区别
     function justAtest()
JS中height、clientHeight、scrollHeight、offsetHeight区别    

{

JS中height、clientHeight、scrollHeight、offsetHeight区别        var test
= document.getElementById(test);
JS中height、clientHeight、scrollHeight、offsetHeight区别        var test2
=document.getElementById(test2)
JS中height、clientHeight、scrollHeight、offsetHeight区别        var test3
=document.getElementById(test3)
JS中height、clientHeight、scrollHeight、offsetHeight区别        var test4
=document.getElementById(test4);     
JS中height、clientHeight、scrollHeight、offsetHeight区别        alert(test4.clientHeight); 
JS中height、clientHeight、scrollHeight、offsetHeight区别        alert(test3.clientHeight);    
JS中height、clientHeight、scrollHeight、offsetHeight区别        alert(test2.clientHeight)
JS中height、clientHeight、scrollHeight、offsetHeight区别        alert(test.clientHeight);      
JS中height、clientHeight、scrollHeight、offsetHeight区别        alert(document.body.clientHeight) 
JS中height、clientHeight、scrollHeight、offsetHeight区别     }

运行后火狐的结果为:700,550,583,483,1000
           IE的结果为:700 ,550,583,483,1000
IE与火狐下的运行结果是一致的.下面来看下clientHeight的定义.
clientHeight:可见区域的宽度,不包括boder的宽度,如果区域内带有滚动条,还应该减去横向滚动条不可用的高度,正常的是17px,其实就是滚动条的可滚动的部分了,其实clientHeight与height的高度差不多,如果不带滚动条的话他们的值都是一样的,如果带有滚动条的话就会比height值少17px;火狐与IE下均为一致.
接着我们来看scrollHeight

JS中height、clientHeight、scrollHeight、offsetHeight区别
 function justAtest()
JS中height、clientHeight、scrollHeight、offsetHeight区别    

{

JS中height、clientHeight、scrollHeight、offsetHeight区别        var test
= document.getElementById(test);
JS中height、clientHeight、scrollHeight、offsetHeight区别        var test2
=document.getElementById(test2)
JS中height、clientHeight、scrollHeight、offsetHeight区别        var test3
=document.getElementById(test3)
JS中height、clientHeight、scrollHeight、offsetHeight区别        var test4
=document.getElementById(test4);     
JS中height、clientHeight、scrollHeight、offsetHeight区别        alert(test4.scrollHeight); 
JS中height、clientHeight、scrollHeight、offsetHeight区别        alert(test3.scrollHeight);    
JS中height、clientHeight、scrollHeight、offsetHeight区别        alert(test2.scrollHeight)
JS中height、clientHeight、scrollHeight、offsetHeight区别        alert(test.scrollHeight);      
JS中height、clientHeight、scrollHeight、offsetHeight区别        alert(document.body.scrollHeight) 
JS中height、clientHeight、scrollHeight、offsetHeight区别     }

运行后火狐的结果为:700,552,700,602,1002
           IE的结果为: 15, 15 , 700,602, 552
scrollHeight:这个属性就比较麻烦了,因为它们在火狐跟IE下简直差太多了..
在火狐下还很好理解,它其实就是滚动条可滚动的部分还要加上boder的高度还要加上横向滚动条不可用的高度,与clientHeight比起来,多个border的高度跟横向滚动条不可用的高度.

在IE中 scrollHeight确是指这个对象它所包含的对象的高度加上boder的高度和marging,如果它里面没有包含对象或者这个对象的高度值未设置,那么它的值将为15
最后我们来看offsetHeight

JS中height、clientHeight、scrollHeight、offsetHeight区别
     function justAtest()
JS中height、clientHeight、scrollHeight、offsetHeight区别    

{

JS中height、clientHeight、scrollHeight、offsetHeight区别        var test
= document.getElementById(test);
JS中height、clientHeight、scrollHeight、offsetHeight区别        var test2
=document.getElementById(test2)
JS中height、clientHeight、scrollHeight、offsetHeight区别        var test3
=document.getElementById(test3)
JS中height、clientHeight、scrollHeight、offsetHeight区别        var test4
=document.getElementById(test4);     
JS中height、clientHeight、scrollHeight、offsetHeight区别        alert(test4.offsetHeight); 
JS中height、clientHeight、scrollHeight、offsetHeight区别        alert(test3.offsetHeight);    
JS中height、clientHeight、scrollHeight、offsetHeight区别        alert(test2.offsetHeight)
JS中height、clientHeight、scrollHeight、offsetHeight区别        alert(test.offsetHeight);      
JS中height、clientHeight、scrollHeight、offsetHeight区别        alert(document.body.offsetHeight) 
JS中height、clientHeight、scrollHeight、offsetHeight区别     }


offsetHeight:
FF:700,552,602,502,1002
IE:700,552,602,502,1002
这个属性好办,因为在测试中IE跟火狐的结果是一样的,均表示是自身的高度,如果有设置boder的话还应该加上boder的值,因为除了test4这个div外,其他的div均有设置border=1px,所以552=550+2,其他的均一样.

嘿嘿,综上所述,clientHeight与height的区别是如果有滚动条时应减去滚动条的17px不可用部分,offsetHeight与Height的区别是增加了boder的高度,ScrollHeihgt与Height的区别是火狐下与offsetHeight一致,IE下如上所述.

相信你了解了这个,对width,clientWidth,scrollWidth,offsetWidth已经不陌生了吧,只不过一个是长一个是宽的问题了.

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/163758.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • LCD 1602A

    LCD 1602A1.直接与Arduino相连2.通过转接板利用I2C的方式与Arduino相连1.直接与Arduino相连直接与Arduino相连的好处是不用现另外购买转接板,但这样造成的后果就是要大量占用Arduino的IO口。如果你的项目外接的传感器不多,那还好,但如果你需要外接很多个传感器或者其他配件,那你的IO口就会告急了~所需材料1xArduinoUNO1xLCD1…

  • Json for Java API学习

    Json for Java API学习首先声明:本文来个很多网友的博客,我通过参考了他们的博客,大致的了解了一些项目中常用的Jsoninjava类和方法,以及关于json的个人理解个人对json的一些简单理解在最近的学习中,查阅了很多资料,了解了一些关于json的基本知识,下面做一个简单的总结:json是什么没有.json结尾的这种文件,json(JavaScriptObjectNotation)是一种简单的

  • 详解卡尔曼滤波原理[通俗易懂]

    详解卡尔曼滤波原理[通俗易懂]详解卡尔曼滤波原理  在网上看了不少与卡尔曼滤波相关的博客、论文,要么是只谈理论、缺乏感性,或者有感性认识,缺乏理论推导。能兼顾二者的少之又少,直到我看到了国外的一篇博文,真的惊艳到我了,不得不佩服作者这种细致入微的精神,翻译过来跟大家分享一下,

  • pycharm2021最新激活码(最新序列号破解)

    pycharm2021最新激活码(最新序列号破解),https://javaforall.cn/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

  • vscode主题 webstorm_vscode/webstorm快捷键

    vscode主题 webstorm_vscode/webstorm快捷键ctrl+/单行[alt+shift+A]多行注释(默认的我已经修改了)复制当前行:shift+alt+up/down(上下箭头)可以修改成ctrl+d(改成webstorm一样)然后找到你想要修改的东西比如多行注释,右键点击changeKeybinding,(同时按住ctrl+shift+/)按enter搞定原来可以修改的–file–>Preferences(…

  • 二叉树前序遍历Java「建议收藏」

    二叉树前序遍历Java「建议收藏」二叉树的前序遍历给你二叉树的根节点root,返回它节点值的前序遍历。示例1:输入:root=[1,null,2,3]输出:[1,2,3]示例2:输入:root=[]输出:[]示例3:输入:root=[1]输出:[1]示例4:输入:root=[1,2]输出:[1,2]示例5:输入:root=[1,null,2]输出:[1,2]方法:迭代思路:建立一个ArrayList数组进行储存元素顺序声明一个栈,按照根左右的顺序数组先a

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号