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 相关文章推荐
javascript实现上传图片前的预览(TX的面试题)
Aug 20 Javascript
JavaScript实用技巧(一)
Aug 16 Javascript
contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
Sep 13 Javascript
基于JavaScript 声明全局变量的三种方式详解
May 07 Javascript
jQuery在ul中显示某个li索引号的方法
Mar 17 Javascript
实现React单页应用的方法详解
Aug 02 Javascript
javascript 将共享属性迁移到原型中去的实现方法
Aug 31 Javascript
vue中node_modules中第三方模块的修改使用详解
May 31 Javascript
微信公众号获取用户地理位置并列出附近的门店的示例代码
Jul 25 Javascript
layui实现数据表格隐藏列的示例
Oct 25 Javascript
JS监听Esc 键触发事键
Apr 14 Javascript
浅析JavaScript中的变量提升
Jun 01 Javascript
根据判断浏览器类型屏幕分辨率自动调用不同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
【星际争霸1】人族1v7家ZBath
2020/03/04 星际争霸
dedecms中常见问题修改方法总结
2007/03/21 PHP
PHP截取汉字乱码问题解决方法mb_substr函数的应用
2008/03/30 PHP
php 大数据量及海量数据处理算法总结
2011/05/07 PHP
php中删除、清空session的方式总结
2015/10/09 PHP
PHP文件系统管理(实例讲解)
2017/09/19 PHP
Laravel框架创建路由的方法详解
2019/09/04 PHP
js操作table元素实现表格行列新增、删除技巧总结
2015/11/18 Javascript
jQuery仿写百度百科的目录树
2017/01/03 Javascript
Angular 2父子组件数据传递之@ViewChild获取子组件详解
2017/07/04 Javascript
js链表操作(实例讲解)
2017/08/29 Javascript
jQuery实现列表的增加和删除功能
2018/06/14 jQuery
Vue常见面试题整理【值得收藏】
2018/09/20 Javascript
微信小程序 获取手机号 JavaScript解密示例代码详解
2020/05/14 Javascript
解决Vue + Echarts 使用markLine标线(precision精度问题)
2020/07/20 Javascript
vue中destroyed方法的使用说明
2020/07/21 Javascript
[01:02:38]DOTA2-DPC中国联赛定级赛 LBZS vs Phoenix BO3第二场 1月10日
2021/03/11 DOTA
[07:25]DOTA2-DPC中国联赛2月5日Recap集锦
2021/03/11 DOTA
Python多线程编程(二):启动线程的两种方法
2015/04/05 Python
python保存网页图片到本地的方法
2018/07/24 Python
妙用itchat! python实现久坐提醒功能
2019/11/25 Python
Python实现线性判别分析(LDA)的MATLAB方式
2019/12/09 Python
Python 内置变量和函数的查看及说明介绍
2019/12/25 Python
Django 实现 Websocket 广播、点对点发送消息的代码
2020/06/03 Python
pandas分批读取大数据集教程
2020/06/06 Python
Python3自带工具2to3.py 转换 Python2.x 代码到Python3的操作
2021/03/03 Python
美国网上购买眼镜:Eyeconic
2017/07/29 全球购物
英国最大的在线床超市:Bed Star
2019/01/24 全球购物
优秀的自荐信要注意哪些
2014/01/03 职场文书
购房意向书范本
2014/04/01 职场文书
抗洪抢险事迹材料
2014/05/06 职场文书
元旦标语大全
2014/10/09 职场文书
2014年文员工作总结
2014/11/18 职场文书
2015年度优秀员工自荐书
2015/03/06 职场文书
vue自定义右键菜单之全局实现
2022/04/09 Vue.js
Python使用Opencv打开笔记本电脑摄像头报错解问题及解决
2022/06/21 Python