BOM对象模型应用分析
2017-04-12 13:38
239 查看
一、scrollHeight、offsetHeight、clientHeight的区别
document.documentElement.scrollWidth
document.documentElement.offsetWidth
document.documentElement.clientWidth
document.body.scrollWidth
document.body.offsetWidth
document.body.clientWidth
有 6 个属性要测,这 6 个属性要放在 4 种情况中:
没有指定 DOCTYPE,网页内容没有超过窗口宽度;
没有指定 DOCTYPE,网页内容超过窗口宽度;
指定 DOCTYPE,网页内容没有超过窗口宽度;
指定 DOCTYPE,网页内容超过窗口宽度;
然后这 4 种情况要放到几个主流浏览器中,假设只有 3 种浏览器:
IE
Firefox
Chrome
算一下,6 * 4 * 3,有 72 种情况。并且不要指望 Firefox 和 Chrome 结果是一样的,不要指望 Firefox 不会出现让您费解的结果。从应用入手简化分析:72 种测试情况确实很繁琐。
我认为我们想要两个东西:
一是 scrollWidth(scrollHeight),虽然它用处不大,但应该比 offsetWidth(offsetHeight)有用得多。它表示的是文档区的宽度(高度),比如一个网页,特别是门户网站,拖很长,就要把没有显示出来的内容都计算进去。
二是视口 viewport,就是 clientWidth,就是窗口中可显示内容的那块区域,就是我们常常看到页面上飞行广告,飞来飞去,碰到边边要反弹的那一块。
测试结果很复杂,只说实际中怎么使用,即结论:
要使用 scrollWidth,取 document.documentElement.scrollWidth 与 document.body.scrollWidth 的最大值;
要使用 clientWidth,如果 document.documentElement.clientWidth > 0,则使用 document.documentElement.clientWidth,否则使用 document.body.clientWidth。
万能表达式为:
var scrollWidth = Math.max(document.documentElement.scrollWidth, document.body.scrollWidth);
var clientWidth = document.documentElement.clientWidth || document.body.clientWidth;
二、获取鼠标的真实位置,兼容各种浏览器
document.documentElement.scrollWidth
document.documentElement.offsetWidth
document.documentElement.clientWidth
document.body.scrollWidth
document.body.offsetWidth
document.body.clientWidth
有 6 个属性要测,这 6 个属性要放在 4 种情况中:
没有指定 DOCTYPE,网页内容没有超过窗口宽度;
没有指定 DOCTYPE,网页内容超过窗口宽度;
指定 DOCTYPE,网页内容没有超过窗口宽度;
指定 DOCTYPE,网页内容超过窗口宽度;
然后这 4 种情况要放到几个主流浏览器中,假设只有 3 种浏览器:
IE
Firefox
Chrome
算一下,6 * 4 * 3,有 72 种情况。并且不要指望 Firefox 和 Chrome 结果是一样的,不要指望 Firefox 不会出现让您费解的结果。从应用入手简化分析:72 种测试情况确实很繁琐。
我认为我们想要两个东西:
一是 scrollWidth(scrollHeight),虽然它用处不大,但应该比 offsetWidth(offsetHeight)有用得多。它表示的是文档区的宽度(高度),比如一个网页,特别是门户网站,拖很长,就要把没有显示出来的内容都计算进去。
二是视口 viewport,就是 clientWidth,就是窗口中可显示内容的那块区域,就是我们常常看到页面上飞行广告,飞来飞去,碰到边边要反弹的那一块。
测试结果很复杂,只说实际中怎么使用,即结论:
要使用 scrollWidth,取 document.documentElement.scrollWidth 与 document.body.scrollWidth 的最大值;
要使用 clientWidth,如果 document.documentElement.clientWidth > 0,则使用 document.documentElement.clientWidth,否则使用 document.body.clientWidth。
万能表达式为:
var scrollWidth = Math.max(document.documentElement.scrollWidth, document.body.scrollWidth);
var clientWidth = document.documentElement.clientWidth || document.body.clientWidth;
二、获取鼠标的真实位置,兼容各种浏览器
//兼容各种浏览器的,获取鼠标真实位置 function mousePosition(ev) { if (!ev) ev = window.event; if (ev.pageX || ev.pageY) { return { x: ev.pageX, y: ev.pageY }; } return { x: ev.clientX + document.documentElement.scrollLeft - document.body.clientLeft, y: ev.clientY + document.documentElement.scrollTop - document.body.clientTop }; }三、获取元素的绝对位置、大小
//获取元素的绝对位置,大小。 参数js对象 function getElAbsolute(elem) { var t = elem.offsetTop; var l = elem.offsetLeft; var w = elem.offsetWidth; var h = elem.offsetHeight; elem = elem.offsetParent; while (elem) { t += elem.offsetTop; l += elem.offsetLeft; elem = elem.offsetParent; }; return { top: t, left: l, width: w, height: h }; }
相关文章推荐
- 浏览器对象BOM模型开发示意图分析(应用设计)
- 《分析模式:可重用对象模型》-- 责任模式
- ORACLE数据库对象统计分析技术应用
- BOM(浏览器对象模型)
- 典型对象池模型的“对象过早归还”现象分析
- [全程建模]设计模型和UML应用中的实例分析收藏
- Crystal 三种报表解决方案大对比:.NET 对象模型,报表应用服务器对象模型,水晶企业对象模型
- 《用例驱动的UML对象建模应用——范例分析》杂谈
- FSO对象模型在VB中的应用
- Javascript文档对象模型(DOM)实例分析 - 爵士的舞步 - JavaEye技术网站
- Javascript文档对象模型(DOM)实例分析
- CS/CSS架构应用的软件性能测试模型分析
- 对象模型--策略、模式、应用 笔记1
- 混合应用接口和对象模型的意外
- 分析模式可复用的对象模型(中文版) 电子版 下载
- ORACLE数据库对象统计分析技术应用(原创)
- FSO对象模型在VB中的应用
- (转)《分析模式:可重用对象模型》-- 责任模式
- RS422/RS485总线模型分析与应用
- 《用例驱动的UML对象建模应用:范例分析》读书笔记