最近在研究指定HTML元素的offsetLeft与offsetTop的值，当前的版本兼容IE6+，FireFox3+，可以在mouse移动到链接上时，在链接右中下角准确创建div。
效果如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>divpostion.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">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css">
.report{
margin:10px;
width:500px;
border:2px;
border-style: solid;
border-color: green;
}
.conts{
margin:20px;
width:60%;
border: 1px;
border-style: solid;
border-color: blue;
}
.hrefs{
margin: 15px;
width:50%;
border-width:2px;
border-color: #999;
border-style: solid;
}
ul.tes{
height:220px;
}
ul.tes li{
height:50px;
line-height:30px;
display:inline;
}
ul.tes li a {
width: 150px;
height: 30px;
border: 1px;
border-color: red;
border-style: solid;
}
a:hover {
background: #cfc;
}
</style>
<script type="text/javascript">
function createTip(){
var _tips = document.getElementById("myTip");
if(typeof(_tips)=="undefined"||_tips == null)
{
_tips = document.createElement("div");
_tips.id = "myTip";
_tips.style.position = "absolute";
_tips.style.borderWidth = "1px";
_tips.style.fontSize = "9pt";
_tips.style.filter = "progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=135,strength=3)";
_tips.style.padding = "5px 8px 3px 8px";
_tips.style.width="300px";
_tips.style.height="200px";
_tips.style.display="none";
_tips.style.background="url(images/tip.gif) no-repeat left top";
document.body.appendChild(_tips);
}
return _tips;
}
/**
判断IE版本
function IEversion(){
var version=navigator.appVersion;
//alert(navigator.appVersion);
if(navigator.appName =="Microsoft Internet Explorer")
alert("your browser is IE"+parseInt(version.split(" ")[3]));
}
*/
function showtips(link){
var tip=createTip();
tip.style.display="";
var obj=link;
var left=obj.offsetLeft;
while((obj=obj.offsetParent)!=null){
left+=obj.offsetLeft;
/* 这里有一个问题尚未解决，因为IE7以下版本，offsetLeft与offsetTop没有将borderWidth的值加进去。
当border-width大于0时，这里就漏加了N*borderWidth. 这里遇到一个问题是，border-width的默认属性是medium,
所以没有手动设置border或者border-width时，默认为medium,用parseInt()转得到的是NAN，到底怎么解决？？？？
var wid=obj.style.borderLeftWidth;
wid=parseInt(wid);
alert(wid||0);
left+=wid>0?wid:0;
*/
}
left+=30;
obj=link;
var top=obj.offsetTop;
var parent=obj.offsetParent;
if (window.ActiveXObject) { //IE浏览器
while(parent!=null && parent!=document.body){
top+=parent.offsetTop;
//var wid=obj.style.borderLeftWidth;
// wid=parseInt(wid);
//alert(wid||0);
//top+=wid||0;
parent=parent.offsetParent;
}
top+=35;
} else { //其他
top+=15;
}
tip.style.left=left+"px";
tip.style.top=top+"px";
tip.innerHTML="<p>offsetLeft="+left+"<br>offsetTop="+top+"</p>";
}
function chartlivess(){
var _tips = document.getElementById("myTip");
if(_tips!=null)
{
_tips.style.display="none";
}
}
</script>
</head>
<body>
<div class="report">
<div class="conts">
<div class="hrefs">
<ul id="testul" class="tes">
<li>
<a href="#" onmouseover="showtips(this)"
onmouseout="chartlivess()">click me1 </a>
</li>
<li>
<a href="#" onmouseover="showtips(this)"
onmouseout="chartlivess()">click me2 </a>
</li>
<li>
<a href="#" onmouseover="showtips(this)"
onmouseout="chartlivess()">click me3 </a>
</li>
<li>
<a href="#" onmouseover="showtips(this)"
onmouseout="chartlivess()">click me4 </a>
</li>
<li>
<a href="#" onmouseover="showtips(this)"
onmouseout="chartlivess()">click me5 </a>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
不过，目前的版本仍然存在一些问题，待解决。
因为FF的offsetLeft与offsetTop是相对body定位的,而IE则是相对上一级的，所以
1.当设置ul,li,a的height时，FF都是正确的，IE就有错位。
2.还有一个问题没有解决的是，当上级对象有borderWidth时，定位也有问题。
因为IE7以下版本offsetLeft与offsetTop没有将borderWidth的值加进去。
当border-width大于0时，这里就漏加了N*borderWidth. 这里遇到一个问题是，border-width的默认属性是medium,所以没有手动设置border或者border-width时，默认为medium,用parseInt()转得到的是NAN，到底怎么解决？？？？
2010-1-11号更新版本，解决上面两个问题，目前测试过IE6、IE7，FireFox3.5,IE8暂时没有测试。
由于border-width如果设置的话，一般是用px，而默认为medium,似乎等同于0的效果（个人鄙见，因为我现在只计算设置为border:xxpx和border-width:xxpx的情况，在IE与FireFox下测试，似乎定位没有问题。）
修改的部分如下：
function showtips(link){
var tip=createTip();
tip.style.display="";
var obj=link;
var left=obj.offsetLeft;
while((obj=obj.offsetParent)!=null){
left+=obj.offsetLeft;
/* 这里有一个问题尚未解决，因为IE7以下版本，offsetLeft与offsetTop没有将borderWidth的值加进去。
当border-width大于0时，这里就漏加了N*borderWidth. 这里遇到一个问题是，border-width的默认属性是medium,
所以没有手动设置border或者border-width时，默认为medium,用parseInt()转得到的是NAN，到底怎么解决？？？？
*/
var wid=0;
if (window.ActiveXObject) {
wid=obj.currentStyle.borderLeftWidth;
}else{
wid=obj.style.borderLeftWidth;
}
if(wid.indexOf("px")!=-1){
var wids=wid.split("px");
wid=parseInt(wids[0]);
//alert(wid);
left+=wid>0?wid:0;
}
}
left+=30;
obj=link;
var top=obj.offsetTop;
/*IE浏览器,因为对于FireFox游览器，offsetTop是相对于Body的，而不是相对于上级对象，
所以不需要累加父级offsetTop,并且，FireFox已经所有对象的borderWidth都已经算在offsetTop/offsetLeft中了，所以也不需要再累加
各层的borderLeftWidth/borderTopWidth
*/
if (window.ActiveXObject) {
while((obj=obj.offsetParent)!=null){
top+=obj.offsetTop;
var wid=obj.currentStyle.borderTopWidth;
if(wid.indexOf("px")!=-1){
var wids=wid.split("px");
wid=parseInt(wids[0]);
top+=wid>0?wid:0;
}
parent=parent.offsetParent;
}
top+=35;
} else { //其他
top+=15;
}
tip.style.left=left+"px";
tip.style.top=top+"px";
tip.innerHTML="<p>offsetLeft="+left+"<br>offsetTop="+top+"</p>";
}
分享到：
相关推荐
总结一下，`div+css`布局制作箭头的步骤流程包括：创建`div`元素、定义边框、调整角度、定位箭头以及可能的复杂形状实现。这不仅有助于提升网页设计技能，也有助于理解CSS的灵活性和强大性。对于志峰创业室这样的...
在现代Web开发中，`div`通常作为布局的基础，通过CSS Grid或Flexbox来创建复杂的页面结构。 其次，`table`元素则用于展示结构化的数据，如表格形式的数据。`table`包含`thead`（表头）、`tbody`（主体内容）和`...
Div元素是构建网页布局的基础，它可以被用来创建复杂的网格系统、定位元素，甚至实现响应式设计，适应不同设备的屏幕尺寸。 CSS是用于控制网页元素外观的关键技术，它允许我们改变字体、颜色、大小、间距、位置等...
在网页设计中，DIV通常被用作页面布局的基础，通过组合多个DIV，可以创建复杂的网页结构。 “asp+div模板网站”是一个基于ASP技术的新闻发布系统模板，利用了DIV进行页面布局。这个模板对于开发者来说，提供了快速...
在JavaScript（JS）中绘制简单流程图是一种常见的需求，特别是在创建交互式网页应用程序时。JS+DIV技术可以实现这一目标，无需依赖任何图形库。在这个“JS绘制简单流程图JS+DIV超级半成品”项目中，开发者可能已经...
在创建流程图时，每个步骤通常会被表示为一个 `div` 元素，每个 `div` 可以通过设置不同的类名来区分其样式，例如“step1”，“step2”等。 接下来，我们利用 `css` 来定义这些 `div` 的外观和布局。以下是一些关键...
5. **定位**：CSS的position属性（static、relative、absolute、fixed）用于控制元素的位置，特别是在复杂布局中，绝对定位和相对定位经常被用来创建层次感和动态效果。 6. **浮动**：float属性可以使得元素在容器...
3. 连接样式表：在XHTML文档中引入CSS文件，使用`<link>`标签链接外部样式表，或直接在`<style>`标签内编写内联样式。 4. 调整布局：利用CSS的布局技巧，如浮动、定位、Flexbox或Grid，调整元素的位置和大小。 5. ...
在“asp.net +div +css 学院网站”项目中，ASP.NET起到了核心的后端开发作用，负责处理用户请求、数据交互、业务逻辑和服务器端脚本。 【CSS与Div布局】 CSS（Cascading Style Sheets）是用于描述HTML或XML（包括...
在IT领域，创建一个弹出且可拖动的Div元素是一项常见的需求，尤其在构建用户界面时。这个Div通常用于展示一些临时信息或者提供交互功能，比如本例中的树形菜单。下面我们将深入探讨如何实现这样的功能，并结合提供的...
4. **跨域问题**：使用AJAX时，可能会遇到跨域限制，需要理解CORS（跨源资源共享）机制来解决。 综上所述，这个压缩包中的"AJAX可以拖动的DIV块.htm"很可能是演示如何使用JavaScript和AJAX技术创建一个可拖动的DIV...
在这个“div css制作简易订单步骤流程效果图”的主题中，我们将深入探讨如何利用这两个技术来创建一个清晰、易懂的订单步骤流程。 首先，理解`div`的用途至关重要。`div`（division）是一个通用的容器，可以包含...
2. **定位问题**：找出导致双线连接显示异常的具体原因，可能与线条的坐标计算、渲染顺序、重叠处理等有关。 3. **修改源码**：对存在问题的代码段进行修正，确保每条连接线都能正确地显示出来，不互相遮挡。 4. **...
标题“获取图片或者div上的点坐标--带例子”所涉及的知识点主要是如何在JavaScript中实现这一功能。这里将详细讲解这一过程，并结合描述中的应用场景——制作图片地图描边，来展开讨论。 首先，我们需要了解HTML的`...
通过CSS（Cascading Style Sheets）样式表，我们可以对这些DIV进行布局控制，实现网页的精确定位。DIV+CSS布局是现代网页设计的主流方式，相比传统的表格布局，它具有更好的可维护性、扩展性和更高的页面加载速度。...
虽然这是一种创新的布局方式，但在实际应用中可能会遇到性能问题，特别是在元素数量庞大的情况下。因此，优化CSS选择器、减少不必要的计算以及合理使用CSS缓存都是提高页面加载速度的关键。 总结，"精美蜂窝状图片 ...
- **解决问题策略** 为了克服这些问题，首先需要转变思维方式，从关注内容的语义和结构入手，而不是一开始就考虑外观设计。其次，提供一份详尽的对照表，帮助理解传统表现层属性与CSS属性之间的对应关系。 #### ...
在网页设计中，"纯div+css制作的圆形导航"是一种常见的实现方法，它通过HTML结构和CSS样式来创建一个既美观又功能完备的导航菜单，完全不依赖于JavaScript或其他图像处理技术。这种方式的优点在于代码简洁，易于维护...
【标题】"E文DIV+CSS的YAHOO小偷 -ASP源码.zip"涉及到的主要技术是ASP（Active Server Pages）以及网页布局技术DIV+CSS。ASP是一种由微软开发的服务器端脚本环境，用于创建动态交互式网页。它允许开发者在HTML中嵌入...