JavaScript中页面和块高度的属性总结

【菜科解读】
经常看到有人百度为什么cliengHeihgt获取的值为0,clientHeight与offsetHeight到底哪里不一样,为什么遇到这样问题的时候你总是感到迷惘呢,究其原因是对他们的属性不认识造成的,当我们创建HTML页面时候对于一个元素的宽度通常我们会指定他多大(以百分比或以像素为单位),但高度往往可以有所不同,这取决于你的内容。
与块的高度相关联的常见问题是:向下滚动到特定的地方高度是多少;元素的绝对位置,;一个块相对于另一个块的高度等。
在这种情况下CSS并不总是有帮助,特别是如果页面是动态的,这个时候使用javascript来获取他们的值是非常有帮助的
页面高度
设置窗口对象的高度的方法:
属性描述innerHeight(innerWidth)设置窗口的内容区域的高度outerHeight(outerWidth)设置窗口高度screen.availHeight(screen.availWidth)高度,以像素为单位的工作区屏幕大小(不含工具栏的高度)screen.height(screen.width)屏幕的高度(以像素为单位)screenY(screenX)从屏幕顶部到浏览器窗口的上边界的距离scrollY(scrollX)文档垂直滚动的距离pageYOffset(pageXOffset)页面的当前垂直位置相对于窗口角最上方左侧请注意,第一并非所有的浏览器都支持,第二,并非所有的属性值一致。
另外,不要忘 记,这些都是针对窗口对象中的所有属性,这意味着它们只适用于窗口对象,所以你不能这样写document.getElementById(ID).innerHeight等 但是,在测试过程中(IE 6, FF 2.0, Opera 9.25)),结果发现,所有的浏览器只支持window.screen.availHeight和 window.screen.height(见下面汇总表)。
但是,在大多数情况下,这是不够的,它往往是要知道块或容器的高度,所以你应该寻找其他方式
属性描述clientHeight(clientWidth)没有滚动条的高度scrollHeight(scrollWidth)包括滚动条的高度scrollTop(scrollLeft)当前位置相对于该块的上边界的垂直位移offsetHeight(offsetWidth)对象的可见宽度,包滚动条等边线,会随窗口的显示大小改变重要注意事项:这些属性需要在页面完全加载后才能使用,否则可能会有所不同,为什么呢?看下面的表...
汇总表
属性
没有定义DOCTYPE定义了!!DOCTYPE XHTML 1.0 Transitionalie浏览器(6)FF(2.0)Opera(9.25)ie浏览器(6)FF(2.0)Opera(9.25)window.innerHeight
未定义
807
848
未定义
807
848
window.outerHeight
未定义
979
911
未定义
979
911
window.screen.availHeight
971
971
971
971
971
971
window.screen.height
1024
1024
1024
1024
1024
1024
window.screenY
未定义
-4
-23
未定义
-4
-23
window.scrollY
未定义
变化取决于从滚动
未定义
未定义
变化取决于从滚动
未定义
window.pageYOffset
未定义
变化取决于从滚动
变化取决于从滚动
未定义
变化取决于从滚动
变化取决于从滚动
document.body.clientHeight
846
807
848
3196
3124
3136
document.body.scrollHeight
3252
3202
3166
3196
3124
3136
document.body.scrollTop
变化取决于从滚动
变化取决于从滚动
变化取决于从滚动
0
0
0
document.documentElement.scrollTop
0
0
0
变化取决于从滚动
变化取决于从滚动
变化取决于从滚动
document.body.offsetHeight
850
3192
848
3196
3124
3136
的document.getElementById(this_tbl).clientHeight
361
371
361
361
370
361
的document.getElementById(this_tbl).scrollHeight
361
371
361
361
370
361
的document.getElementById(this_tbl).offsetHeight
361
371
361
361
370
361
测试在您的浏览器(刷新页面点击下面refresh按钮就行测试)
window.innerHeight916window.outerHeight1020window.screen.availHeight1020window.screen.height1050window.screenY0window.scrollY0window.pageYOffset0document.body.clientHeight975document.body.scrollHeight2412document.body.scrollTop0document.documentElement.scrollTop0document.body.offsetHeight975document.getElementById(tbl).clientHeight421document.getElementById(tbl).scrollHeight421document.getElementById(tbl).offsetHeight421注:表中的值取决于个人设置(工具栏,状态栏,字体大小等),所以他们可能会有所不同,即使你的浏览器版本是相同的。
结论
DOCTYPE影响上述参数的值;
在屏幕上确定高度时,你总是可以根据window.screen.height来确定;
找到一个页面或块元素的可见部分的高度使用的document.getElementById.(id).clientHeight,包括滚动部分的-的document.getElementById(ID).scrollHeight。
JavaScript,中,页面,和,块,高度,的,属性,总结如何在浏览器中调试less&sass
比如把一些功能函数抽出来,单独放一个文件。
页面一般都含有一些公共模块,把模块也可以抽离出来单独存放,等等。
很多同学都已经开始在项目使用less或sass,它们用起来确实是很爽,大大提高效率呀。
less & sass 都无法在浏览器中直接执行,需要变成CSS。
有时候想调试样式,我们看到的行号是css代码的行号,并不能直接对应到less&sass文件中,修改起来总是不方便。
看到less&sass这么受欢迎,热情的开发者们给firefox开发了一个插件FireSass,后来chrome也跟上了,开启一个实验性功能支持sass调试。
具体设置如下:编译时添加参数:sass开启debug-info选项:sass demo.sass demo.css –debug-infoless开启line-numbers:lessc demo.less demo.css –line-numbers=comments这样,编译后的css中将包含调试信息:浏览器设置:firefox执行安装FireSass即可。
chorme:地址栏打开chrome://flags/,启用开发者工具实验(DeveloperToolsexperiments.)。
重启浏览器后,打开开发者工具的设置选项卡,Experiments -> Support for sass 勾选。
最终调试效果: 如,何在,浏览器,中,调试,less,amp,sass,Sa
Javascript中的“作用域链”知识分享
名词解释活动对象:一次函数调用开始的时候,javascript解释器会收集函数体中的所有局部变量(以var形式声明的变量),将这些局部变量存储到一个称为“活动对象”的对象里,所有变量都初始为undefined。
代码示例1 var fun = function(){2 alert(name);3 var name = ‘段光伟‘;4 }当执行这个函数时候时(fun()),函数体还没执行到,当前的活动对象为[{ name: undefined }],因此fun()执行的结果为:函数的[scope]属性:每个函数在定义的时候(生成函数实例的时候)都会分配一个[scope]属性,这个属性指向的当前的“作用域链”。
这个属性开发人员是访问不到的,只有javascript能访问。
作用域链:当函数调用时,javascript引擎会维护一个这次调用的作用域链,这个作用域链条是函数的[scope]指向的作用域链加上函数调用时的活动对象,形式如[ 活动对象, 函数定义时的作用域链条]。
代码示例 1 var a = 1; 2 //步骤1:[ { a: 1, outer: undefined } ] 4 var outer = function(){ 5 //步骤3:[ { b: undefined, inner: undefined } ,{ a: 1, outer: function } ] 6 var b = 2; 7 var inner = function(){ 8 //步骤4:[ {}, { b: 2, inner: function } ,{ a: 1, outer: function } ] 9 return a + b;12 //步骤3:[ { b: 2, inner: function } ,{ a: 1, outer: function } ]13 return inner();16 //步骤2:[ { a: 1, outer: function } ]17 outer();作用域链规则规则1javascript一般运行在一定的宿主中,每个宿主都会提供一个“全局对象”,或者叫“全局活动对象”,这个全局对象是所有作用域链的根节点。
规则2“取值操作”(如:alert(xxxVar))的规则是,沿着作用域链依次查找名称为“xxxVar”的变量,返回第一个找到的值,如果找不到就抛出异常(ReferenceError: xxxVar is not defined)。
规则3“赋值操作”(如:xxxVar = ‘段光伟‘)的规则是,沿着作用域链依次查找名称为“xxxVar”的变量,覆盖第一个找到的值,如果找不到就将“xxxVar”添加到全局对象中。
备注“闭包”这个概念就是通过“作用域链”实现的,而C#是通过编译器实现的,.NET并不支持。
Javascript,中的,“,作用域链,”,知识,分享,代