JS中height、clientHeight、scrollHeight、offsetHeight区别
大家好,又见面了,我是你们的朋友全栈君。
我们来实现test中的onclick事件
function justAtest()
{
var test= document.getElementById(“test“);
var test2=document.getElementById(“test2“)
var test3=document.getElementById(“test3“)
var test4=document.getElementById(“test4“);
alert(test4.style.height);
alert(test3.style.height);
alert(test2.style.height)
alert(test.style.height);
alert(document.body.style.height)
}
height :其实Height高度跟其他的高度有点不一样,在javascript中它是属于对象的style对象属性中的一个成员,它的值是一个字符类型的,而另外三个高度的值是int类型的,它们是对象的属性.因此这样document.body.height就会提示undenifine,而必须写成document.body.style.height 上面的脚本将依次弹出700px,550px,600px,500px,1000px.height是最简单的了,不必去考虑是否有滚动条及边框等.因此也不做多解释了. 然后我们将脚本换下
function justAtest()
{
var test= document.getElementById(“test“);
var test2=document.getElementById(“test2“)
var test3=document.getElementById(“test3“)
var test4=document.getElementById(“test4“);
alert(test4.clientHeight);
alert(test3.clientHeight);
alert(test2.clientHeight)
alert(test.clientHeight);
alert(document.body.clientHeight)
}
运行后火狐的结果为:700,550,583,483,1000 IE的结果为:700 ,550,583,483,1000 IE与火狐下的运行结果是一致的.下面来看下clientHeight的定义. clientHeight:可见区域的宽度,不包括boder的宽度,如果区域内带有滚动条,还应该减去横向滚动条不可用的高度,正常的是17px,其实就是滚动条的可滚动的部分了,其实clientHeight与height的高度差不多,如果不带滚动条的话他们的值都是一样的,如果带有滚动条的话就会比height值少17px;火狐与IE下均为一致. 接着我们来看scrollHeight
function justAtest()
{
var test= document.getElementById(“test“);
var test2=document.getElementById(“test2“)
var test3=document.getElementById(“test3“)
var test4=document.getElementById(“test4“);
alert(test4.scrollHeight);
alert(test3.scrollHeight);
alert(test2.scrollHeight)
alert(test.scrollHeight);
alert(document.body.scrollHeight)
}
运行后火狐的结果为:700,552,700,602,1002 IE的结果为: 15, 15 , 700,602, 552 scrollHeight:这个属性就比较麻烦了,因为它们在火狐跟IE下简直差太多了.. 在火狐下还很好理解,它其实就是滚动条可滚动的部分还要加上boder的高度还要加上横向滚动条不可用的高度,与clientHeight比起来,多个border的高度跟横向滚动条不可用的高度. 在IE中 scrollHeight确是指这个对象它所包含的对象的高度加上boder的高度和marging,如果它里面没有包含对象或者这个对象的高度值未设置,那么它的值将为15 最后我们来看offsetHeight
function justAtest()
{
var test= document.getElementById(“test“);
var test2=document.getElementById(“test2“)
var test3=document.getElementById(“test3“)
var test4=document.getElementById(“test4“);
alert(test4.offsetHeight);
alert(test3.offsetHeight);
alert(test2.offsetHeight)
alert(test.offsetHeight);
alert(document.body.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事件
function justAtest()
{
var test= document.getElementById(“test“);
var test2=document.getElementById(“test2“)
var test3=document.getElementById(“test3“)
var test4=document.getElementById(“test4“);
alert(test4.style.height);
alert(test3.style.height);
alert(test2.style.height)
alert(test.style.height);
alert(document.body.style.height)
}
height :其实Height高度跟其他的高度有点不一样,在javascript中它是属于对象的style对象属性中的一个成员,它的值是一个字符类型的,而另外三个高度的值是int类型的,它们是对象的属性.因此这样document.body.height就会提示undenifine,而必须写成document.body.style.height 上面的脚本将依次弹出700px,550px,600px,500px,1000px.height是最简单的了,不必去考虑是否有滚动条及边框等.因此也不做多解释了. 然后我们将脚本换下
function justAtest()
{
var test= document.getElementById(“test“);
var test2=document.getElementById(“test2“)
var test3=document.getElementById(“test3“)
var test4=document.getElementById(“test4“);
alert(test4.clientHeight);
alert(test3.clientHeight);
alert(test2.clientHeight)
alert(test.clientHeight);
alert(document.body.clientHeight)
}
运行后火狐的结果为:700,550,583,483,1000 IE的结果为:700 ,550,583,483,1000 IE与火狐下的运行结果是一致的.下面来看下clientHeight的定义. clientHeight:可见区域的宽度,不包括boder的宽度,如果区域内带有滚动条,还应该减去横向滚动条不可用的高度,正常的是17px,其实就是滚动条的可滚动的部分了,其实clientHeight与height的高度差不多,如果不带滚动条的话他们的值都是一样的,如果带有滚动条的话就会比height值少17px;火狐与IE下均为一致. 接着我们来看scrollHeight
function justAtest()
{
var test= document.getElementById(“test“);
var test2=document.getElementById(“test2“)
var test3=document.getElementById(“test3“)
var test4=document.getElementById(“test4“);
alert(test4.scrollHeight);
alert(test3.scrollHeight);
alert(test2.scrollHeight)
alert(test.scrollHeight);
alert(document.body.scrollHeight)
}
运行后火狐的结果为:700,552,700,602,1002 IE的结果为: 15, 15 , 700,602, 552 scrollHeight:这个属性就比较麻烦了,因为它们在火狐跟IE下简直差太多了.. 在火狐下还很好理解,它其实就是滚动条可滚动的部分还要加上boder的高度还要加上横向滚动条不可用的高度,与clientHeight比起来,多个border的高度跟横向滚动条不可用的高度. 在IE中 scrollHeight确是指这个对象它所包含的对象的高度加上boder的高度和marging,如果它里面没有包含对象或者这个对象的高度值未设置,那么它的值将为15 最后我们来看offsetHeight
function justAtest()
{
var test= document.getElementById(“test“);
var test2=document.getElementById(“test2“)
var test3=document.getElementById(“test3“)
var test4=document.getElementById(“test4“);
alert(test4.offsetHeight);
alert(test3.offsetHeight);
alert(test2.offsetHeight)
alert(test.offsetHeight);
alert(document.body.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已经不陌生了吧,只不过一个是长一个是宽的问题了.
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/163758.html原文链接:https://javaforall.cn
相关文章
- c浅拷贝和深拷贝的区别_js中深拷贝和浅拷贝的区别
- Js:indexOf() 和 lastIndexOf() 的区别[通俗易懂]
- php 中js跳转页面跳转页面,js跳转代码_PHP页面跳转 Js页面跳转代码[通俗易懂]
- js的基础知识
- 【说站】js中let和var的区别
- JS中三种动态创建元素方式的区别
- JS异步之宏队列与微队列
- leetcode 300. 最长递增子序列 js 动态规划实现
- 如何使用Node.js连接数据库
- js 数组去除重复数据-5 个提升你 JS 编码水平的实例
- js 数组去除重复数据-Vue.js开发移动端经验总结
- js for in for of 的区别
- js同步和异步的区别是什么?
- [html学习记录]html实现返回上一页的几种方法(说白了都是用js)
- 在 Nuxt.js 中配合 windicss 实现暗黑模式适配
- js调用键盘事件
- QQ客服 右侧悬浮JS实现代码详解编程语言
- JS中innerHTML、outerHTML、innerText、outerText的用法与区别详解编程语言
- JS字符串替换
- 解除 Linux 上的 Node.js 安装(linux卸载node)
- 使用JS技术实现Oracle数据库链接(js 链接 oracle)
- JS与PHP向函数传递可变参数的区别实例代码
- js静态方法与实例方法分析
- js前台判断开始时间是否小于结束时间
- JS替换和时间插件的结合使用方法
- JS中引用百度地图并将百度地图的logo和信息去掉
- js截取字符串的两种方法及区别详解
- css样式标签和js语法属性区别
- js判读浏览器是否支持html5的canvas的代码
- Node.js中require的工作原理浅析
- js函数与php函数的区别实例浅析