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)


相关推荐

  • goland2021激活码【在线破解激活】

    goland2021激活码【在线破解激活】,https://javaforall.cn/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

  • vue 刷新保存数据_vuex数据何时清除

    vue 刷新保存数据_vuex数据何时清除在项目中我们通常会遇到这样一个情况,客户不允许把信息存储在sessionStorage/localStorage因为这样会暴露一些存储信息,安全起见只能存储在vuex里面,但是vuex刷新之后state里面的信息依旧会被清除,我们的思路是刷新之前把所有的数据存储在localStorage里面,刷新后取出里面的数据,并清除local/session里面的记录,这种全局的我们可以放在app.vue里面,下面是代码实现//app.vuecreated(){//在页面

    2022年10月16日
  • SQL Server 2019下载及安装教程

    文章目录一、安装SQLServer2019二、安装SQLServerManagementStudio(SSMS)一、安装SQLServer2019搜索SQL,点击红色部分跳出一下界面,随便填,填完之后,点击continue。点击保存,保存成功之后,打开文件夹,右键以管理员身份启动,就会看见下面的画面,我这边选择的是自定义安装。弹出的选项,一个是中文,媒…

  • PLSQL Developer 9 绿色版

    PLSQL Developer 9 绿色版

  • Vue项目实战 —— 哔哩哔哩移动端开发—— 第一篇

    Vue项目实战 —— 哔哩哔哩移动端开发—— 第一篇撑着下班前半小时我用vue写《哔哩哔哩项目》移动端、新手还在哭、老鸟一直在笑。。。技术选型Vue2,技术栈有axios、Vh等,下班过来敲哈哈

  • java对象组声明_如何在Java中声明对象数组?

    java对象组声明_如何在Java中声明对象数组?可以创建对象类数组,该数组可以接受任何类型的对象。在此类数组上运行期间,可以使用instanceof运算符。示例publicclassTester{publicstaticvoidmain(String[]args){Object[]dataArray=newObject[3];dataArray[0]=newInteger(0);dataArray[1]=new…

发表回复

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

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