javascript知识点收藏


Posted in Javascript onFebruary 22, 2007

1.四种浏览器对 document.body 的 clientHeight、offsetHeight 和 scrollHeight 的解释。

这四种浏览器分别为IE(Internet Explorer)、NS(Netscape)、Opera、FF(FireFox)。

clientHeight
大家对 clientHeight 都没有什么异议,都认为是内容可视区域的高度,也就是说页面浏览器中可以看到内容的这个区域的高度,一般是最后一个工具条以下到状态栏以上的这个区域,与页面内容无关。

offsetHeight
IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。
NS、FF 认为 offsetHeight 是网页内容实际高度,可以小于 clientHeight。

scrollHeight
IE、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 的解释与上面相同,只是把高度换成宽度即可。

但是
FF 在不同的 DOCTYPE 中对 clientHeight 的解释不同, xhtml 1 trasitional 中则不是如上解释的。其它浏览器则不存在此问题。

2.JS取clientHeight与scrollTop
先来段数据,下表的值为document.body.clientHeight / document.documentElement.clientHeight

             IE               FF
Html       608/0          630/11096
Xhtml     10942/591    11076/630

在html/xhtml与ie/ff这4种排列组合下,取得的clientHeight几乎没有一样的,可见写一段兼容3种浏览器两种页面标准的js脚本有多头疼。

暂时总结的判断方法如下:
var h1 = document.body.clientHeight;
var h2 = document.documentElement.clientHeight;
var isXhtml = (h2<=h1&&h2!=0)?true:false; //判断当前页面的Doctype是否为Xhtml
var body = isXhtml?document.documentElement:document.body;
alert(body.clientHeight); //最终结果比较一致

安全的取到scrollTop:
document.body.scrollTop + document.documentElement.scrollTop

判断浏览器的类型,这种写法挺喜欢的:
var ua = navigator.userAgent.toLowerCase ();
var os = new Object();
os.isFirefox = ua.indexOf ("gecko") != -1;
os.isOpera = ua.indexOf ("opera") != -1;
os.isIE = !os.isOpera && ua.indexOf ("msie") != -1;

3.js取到flash对象方法汇总

IE, FF, Maxthon用document.getElementById(id)
Opera用 document.embeds(id)

var isOpera=(window.opera&&navigator.userAgent.match(/opera/gi))?true:false;

if(isOpera){
var oswf = document.embeds('ad_flipper_swf');
}else{
var oswf = document.getElementById('ad_flipper_swf');
}

4.js执行顺序
1.同级的不同的代码块,代码块间的执行顺序为从上到下;
2.在代码中嵌入代码的情况下,先执行上层代码块,再执行子代码块;代码中嵌入代码
是指一个文件引入另一个文件,而不是指所有的通过document.write形式打出的代码。

Javascript 相关文章推荐
jquery淡化版banner异步图片文字效果切换图片特效
Apr 08 Javascript
javascript如何使用bind指定接收者
May 04 Javascript
javascript制作游戏开发碰撞检测的封装代码
Mar 31 Javascript
JavaScript实现向setTimeout执行代码传递参数的方法
Apr 16 Javascript
深入探讨Vue.js组件和组件通信
Sep 12 Javascript
JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版)
Nov 30 Javascript
解决Extjs下拉框不显示的问题
Jun 21 Javascript
浅谈vue-cli 3.0.x 初体验
Apr 11 Javascript
vue-cli配置环境变量的方法
Jul 09 Javascript
JointJS JavaScript流程图绘制框架解析
Aug 15 Javascript
vue3.0 项目搭建和使用流程
Mar 04 Vue.js
vue如何在data中引入图片的正确路径
Jun 05 Vue.js
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码
Feb 22 #Javascript
用YUI做了个标签浏览效果
Feb 20 #Javascript
懒就要懒到底——鼠标自动点击(含时间判断)
Feb 20 #Javascript
初探jquery——表单应用范例
Feb 20 #Javascript
动态调用css文件——jquery的应用
Feb 20 #Javascript
js压缩利器
Feb 20 #Javascript
通过jquery实现tab标签浏览效果
Feb 20 #Javascript
You might like
基于mysql的论坛(4)
2006/10/09 PHP
php学习笔记(三)操作符与控制结构
2011/08/06 PHP
PHP发送AT指令实例代码
2016/05/26 PHP
javascript实现的鼠标链接提示效果生成器代码
2007/06/28 Javascript
javascript multibox 全选
2009/03/22 Javascript
js 强制弹出窗口代码研究-又一款代码
2010/03/20 Javascript
JS的replace方法介绍
2012/10/20 Javascript
鼠标选择动态改变网页背景颜色的JS代码
2013/12/10 Javascript
jquery常用操作小结
2014/07/21 Javascript
JS操作时间 - UNIX时间戳的简单介绍(必看篇)
2017/08/16 Javascript
vue-router3.0版本中 router.push 不能刷新页面的问题
2018/05/10 Javascript
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
2019/02/14 jQuery
JavaScript 俄罗斯方块游戏实现方法与代码解释
2020/04/08 Javascript
详解JavaScript类型判断的四种方法
2020/10/21 Javascript
[04:40]DOTA2-DPC中国联赛1月26日Recap集锦
2021/03/11 DOTA
python实现sublime3的less编译插件示例
2014/04/27 Python
使用Python的Scrapy框架编写web爬虫的简单示例
2015/04/17 Python
Python 实现王者荣耀中的敏感词过滤示例
2019/01/21 Python
python中update的基本使用方法详解
2019/07/17 Python
Python使用指定端口进行http请求的例子
2019/07/25 Python
Python实现投影法分割图像示例(一)
2020/01/17 Python
pycharm中leetcode插件使用图文详解
2020/12/07 Python
Huda Beauty官方商店:化妆和美容产品
2020/09/05 全球购物
Kingsoft金山公司C/C++笔试题
2016/05/10 面试题
MySQL面试题
2014/01/12 面试题
2014年高考决心书
2014/03/11 职场文书
汽车专业求职信
2014/06/05 职场文书
广播体操比赛口号
2014/06/10 职场文书
公司委托书格式范文
2014/10/09 职场文书
青年教师个人总结
2015/02/11 职场文书
大学生见习总结报告
2015/06/24 职场文书
六一儿童节园长致辞
2015/07/31 职场文书
大学开学感言
2015/08/01 职场文书
导游词之秦皇岛燕塞湖
2020/01/03 职场文书
Java并发编程之详解CyclicBarrier线程同步
2021/06/23 Java/Android
如何利用python创作字符画
2022/06/25 Python