专注于互联网--专注于架构

 最新标签
网站地图
文章索引
Rss订阅

首页 »Javascript教程 » offsetheight:Javascript拖拽系列文章2的offsetLeft、offsetTop、offsetWidth、offsetHeight属性 »正文

offsetheight:Javascript拖拽系列文章2的offsetLeft、offsetTop、offsetWidth、offsetHeight属性

来源: 发布时间:星期四, 2008年12月25日 浏览:22次 评论:0
在阅读本文的前请先看看第篇文章Javascript拖拽系列文章1的offParent属性循序渐进是个很好习惯值得提倡
好了看看我们今天内容吧
首先让我们先看看element.offLeft属性
支持浏览器:Internet Explorer 4.0+Mozilla 1.0+Netscape 6.0+Opera 7.0+Safari 1.0+
定义:返回个像素数值它表示当前元素左边缘到它offParent属性返回对象左边缘偏移量
句法:
leftDis = element.offLeft
offLeft属性在Internet Explorer中实现存在Bug无论当前元素offParent属性取值如何它总是以Body元素为参照物来计算offLeft幸运是这个Bug在Intern Explorer 8 Beta 1中已经修复仍然需要注意IE会从Body元素Left-Border为标准开始计算OffLeft而其他浏览器将从Left-Margin开始计算
测试代码1:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; char=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
body{
border:1px solid red;
margin-left:0px;
}
#parent{
position:relative;
left:25px;
top:0px;
border:1px solid black;
}
</style>
<script type="text/javascript" language="JavaScript">
function off_init{
var pElement = document.getElementById("sonObj");
parentObj = pElement.offParent;
var ioffLeft=pElement.offLeft;
alert(parentObj.tagName);
alert(ioffLeft);
}
</script>
</head>
<body onload="off_init">
<div id="parent">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
<span id="sonObj">测试OffParent属性</span>
</div>
</body>
</html>
在IE中运行这段代码后会依次弹出两个窗口分别显示“DIV”、“437”,分别表示offParent和offLeft在下图中红色边框代表Body元素黑色边框代表Div元素从而证明即使在IE中offParent不是Body元素offLeft计算也以Body元素为标准



图:在IE7中结果

在IE 8 Beta 1中这Bug已经被修复将分别返回“DIV”“411”已经和其他浏览器样符合了标准
标签：jsoffsetwidth offsetwidth jsoffsetheight offsetheight

相关文章

读者评论

发表评论

  • 昵称：
  • 内容：

热门标签

精华推荐

Dig排行

阅读排行

最新文章