先吧代码贴在这里,有时间或者需要用的时候方便。。。
关于获取各种浏览器可见窗口大小的一点点研究。
在我本地测试当中:
在IE、FireFox、Opera下都可以使用
document.body.clientWidth
document.body.clientHeight
即可获得,很简单,很方便。
而在公司项目当中:
Opera仍然使用
document.body.clientWidth
document.body.clientHeight
可是IE和FireFox则使用
document.documentElement.clientWidth
document.documentElement.clientHeight
原来是W3C的标准在作怪啊
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
如果在页面中添加这行标记的话
在IE中:
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
在FireFox中:
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
?
在Opera中:
document.body.clientWidth ==> 可见区域宽度
document.body.clientHeight ==> 可见区域高度
document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)
document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)
而如果没有定义W3C的标准,则
IE为:
document.documentElement.clientWidth ==> 0
document.documentElement.clientHeight ==> 0
FireFox为:
document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)
Opera为:
document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)
真是一件麻烦事情,其实就开发来看,宁可少一些对象和方法,不使用最新的标准要方便许多啊。
用Javascript获取指定页面元素的位置是一个非常常见的需求,本文介绍的函数能够准确返回一个元素相对于整个文档左上角的坐标,即元素的 top 、left 的位置,而且能够兼容浏览器,相信对新手非常有用。
function getElementPos(elementId) {
var ua = navigator.userAgent.toLowerCase();
var isOpera = (ua.indexOf('opera') != -1);
var isIE = (ua.indexOf('msie') != -1 && !isOpera); // not opera spoof
var el = document.getElementById(elementId);
if(el.parentNode === null || el.style.display == 'none') {
return false;
}
var parent = null;
var pos = [];
var box;
if(el.getBoundingClientRect) //IE
{
box = el.getBoundingClientRect();
var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
var scrollLeft = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);
return {x:box.left + scrollLeft, y:box.top + scrollTop};
}else if(document.getBoxObjectFor) // gecko
{
box = document.getBoxObjectFor(el);
var borderLeft = (el.style.borderLeftWidth)?parseInt(el.style.borderLeftWidth):0;
var borderTop = (el.style.borderTopWidth)?parseInt(el.style.borderTopWidth):0;
pos = [box.x - borderLeft, box.y - borderTop];
} else // safari & opera
{
pos = [el.offsetLeft, el.offsetTop];
parent = el.offsetParent;
if (parent != el) {
while (parent) {
pos[0] += parent.offsetLeft;
pos[1] += parent.offsetTop;
parent = parent.offsetParent;
}
}
if (ua.indexOf('opera') != -1 || ( ua.indexOf('safari') != -1 && el.style.position == 'absolute' )) {
pos[0] -= document.body.offsetLeft;
pos[1] -= document.body.offsetTop;
}
}
if (el.parentNode) {
parent = el.parentNode;
} else {
parent = null;
}
while (parent && parent.tagName != 'BODY' && parent.tagName != 'HTML') { // account for any scrolled ancestors
pos[0] -= parent.scrollLeft;
pos[1] -= parent.scrollTop;
if (parent.parentNode) {
parent = parent.parentNode;
} else {
parent = null;
}
}
return {x:pos[0], y:pos[1]};
}
使用示例
var pos=getElementPos("divId");
alert("距左边距离"+ pos.x +",距上边距离"+pos.y);
h=window.screen.height;
y=window.screenTop;
ie=h-y;
alert(h + '-' + y + '=' + ie);
分享到:
相关推荐
自适度div高度,js获取元素位置和窗口高度,自动适应,也可以使用在父框是iframe,有完整的js实例
JavaScript获取鼠标位置和鼠标与div的相对位置
如果一段html嵌套过多,在js中获取还是比较麻烦的,我写了几套方案...元素多层嵌套,JS获取问题</title> </head> <body> <div id=box> <span>span <div> <span>span <span>1 </div> <div> <spa
JS+DIV以层代替弹出窗口的例子,弹出DIV层窗口 JS+DIV以层代替弹出窗口的例子,弹出DIV层窗口 JS+DIV以层代替弹出窗口的例子,弹出DIV层窗口 JS+DIV以层代替弹出窗口的例子,弹出DIV层窗口 JS+DIV以层代替弹出窗口的例子...
js实现div随浏览器高度变化,主要是高度变化和实现滚动条,还有侧栏显示隐藏,可以作为一个地图开发界面的参考
js获取指定位置的div坐标,方便用户得到网页上的任何div元素的坐标位置
计算Web页面的高度并给div赋高度,得到的是工作区的高度,根据工作区高度计算的
如何用js加css控制div自适应高度问题完美解决方法
JAVASCRIPT弹出DIV层窗口实例
简单的一个js操作div例子,模拟聊天窗口,实现拖拉控制div高度等功能,有需要的可以看看,对谷歌,IE,360,火狐,op都已兼容。
可以任意的操作div,从中可以学习javascript
div css 窗口 模态窗口 JavaScript css
js加div 窗口拖动实现、js加div 窗口拖动实现、Ajax后台保存窗口属性值
alert功能的扩展版,可以弹出一个以DIV层中元素代码为内容的提示窗口,也可以直接弹出文字信息。 提供了两个JS方法: (1)showAlert(info); 函数说明:info参数可以是字符串信息,也可以是html元素代码。 (2)...
DIV 拖动 JS移动DIV DIV位置移动DIV 拖动 JS移动DIV DIV位置移动DIV 拖动 JS移动DIV DIV位置移动DIV 拖动 JS移动DIV DIV位置移动
JavaScript 模式窗口 弹出窗 DIV JavaScript 模式窗口 弹出窗 DIV JavaScript 模式窗口 弹出窗 DIV JavaScript 模式窗口 弹出窗 DIVJavaScript 模式窗口 弹出窗 DIVJavaScript 模式窗口 弹出窗 DIVJavaScript 模式...
主要介绍了jquery实现动态改变div宽度和高度,效果非常不错,而且兼容性也很好,有需要的小伙伴可以参考下。
JQ JS javascript layui UI组件 元素 div 拖动插件JQ JS javascript layui UI组件 元素 div 拖动插件
JS可拖动窗口控件,可实现各种DIV窗口自定义及各种DIV弹出提示框 带遮罩层的DIV窗口(对话框)控件 js javascript 对话框
div模式窗口div模式窗口div模式窗口