js和css中WEB元素的距离和宽度高度等问题

泡在网上的日子 / 文 发表于2012-03-07 11:39 次阅读



网页元素的宽高度 以及距边界的距离问题一直困扰着很多人,虽然网上有很多文章,但是基本都不兼容各种浏览器或者是没讲清楚,把外文解释不加思考的翻译过来。 下面有个获取元素据上下左右边界的位置的函数很有用


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>index.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<!--
//定位位置
CSS: position(absolute-绝对的,相对浏览器,relative-相对的,相对父对象 top,right,bottom,left,z-index)
window.dialogHeight 设置或获取模式对话框的---高度
window.dialogLeft 设置或获取模式对话框的---左坐标
window.dialogTop 设置或获取模式对话框的---顶坐标
window.dialogWidth 设置或获取模式对话框的---宽度
window.screenLeft 获取浏览器客户区左上角相对于---屏幕左上角的 x 坐标
window.screenTop 获取浏览器客户区左上角相对于---屏幕左上角的 y 坐标
window.event.clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条
window.event.clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标,其中客户区域不包括窗口自身的控件和滚动条
window.event.offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标
window.event.offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标
window.event.screenX 设置或获取鼠标指针位置相对于用户屏幕的 x 坐标
window.event.screenY 设置或获取鼠标指针位置相对于用户屏幕的 y 坐标
window.event.x 设置或获取鼠标指针位置相对于父文档的 x 像素坐标
window.event.y 设置或获取鼠标指针位置相对于父文档的 y 像素坐标
window.screen.availHeight 获取系统屏幕的工作区域高度,排除 Microsoft? Windows? 任务栏
window.screen.availWidth 获取系统屏幕的工作区域宽度,排除 Windows 任务栏
window.screen.height 获取屏幕的垂直分辨率
window.screen.width 获取屏幕分辨率的宽

网页可见区域宽:document.body.clientWidth
网页可见区域高:document.body.clientHeight
网页可见区域宽:document.body.offsetWidth (包括边线的宽)
网页可见区域高:document.body.offsetHeight (包括边线的宽)
网页正文全文宽:document.body.scrollWidth
网页正文全文高:document.body.scrollHeight
网页被卷去的高:document.body.scrollTop
网页被卷去的左:document.body.scrollLeft

HTML精确定位:clientWidth:
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
obj.offsetHeight: 指obj控件自身的绝对高度
obj.offsetWidth: 指obj控件自身的绝对宽度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
document.div.scrollTop 垂直方向滚动的值
event.clientX + document.div.scrollTop 相对文档的水平座标+垂直方向滚动的量

IE,FireFox 差异如下:
IE6.0、FF1.06+:
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
-->
<script type="text/javascript">
//设置DIV的位置
function setOffsets()
{
var popup = document.getElementById('popup');
var inputv = document.getElementById('inputObj');

var width = inputv.offsetWidth;
var left = getOffsetLeft(inputv);
var top = getOffsetTop(inputv) + inputv.offsetHeight;

popup.style.border = '1px solid lightblue';//悬浮DIV popup
popup.style.width = width + "px";
popup.style.left = left + "px";
popup.style.top = top + "px";

popup.style.height = "100px";
}
//距离左边的距离
function getOffsetLeft(field)
{
return getOffset(field,"offsetLeft");
}
//距离顶部的距离
function getOffsetTop(field)
{
return getOffset(field,"offsetTop");
}
//循环结点得到相对距离
function getOffset(field,attr)
{
var offset = 0;
while(field)
{
offset += field[attr];
field = field.offsetParent;
}
return offset;
}
</script>
<body>
<div style="text-align: center;">
<input name="inputObj" id="inputObj"><input type="button" value="list" onclick="setOffsets();"/>
</div>
<div id="popup" style="position: absolute;"></div>
</body>
</html>

收藏 赞 (0) 踩 (0)
上一篇:网页前台存储数据,jquery data方法
有些前端开发者喜欢使用HTML的属性来存储数据: $(selector).attr(alt, data being stored); //之后可以这样读取数据: $(selector).attr(alt); 使用alt属性来作为参数名存储数据其实对于HTML来说是不符合语义的,我们可以使用jQuery的data方法来为页面中的某
下一篇:js中blur和click事件的冲突
在表单验证中,我们往往会在输入框失去焦点时触发一个onblur时间,然后根据输入的内容产生提示,但假如在输入框失去焦点后需要点击某个按钮,这时输入框的blur事件会先发生,然而这是我们不希望看到的。