Js获取元素位置及动态生成元素的练习备忘
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2
<html xmlns="http://www.w3.org/1999/xhtml">
3
<head>
4
<title> new document </title>
5
<meta name="generator" content="editplus" />
6
<meta name="author" content="" />
7
<meta name="keywords" content="" />
8
<meta name="description" content="" />
9
</head>
10![](/Images/OutliningIndicators/None.gif)
11
<body>
12
13
<script type="text/javascript" language="javascript">
14
function $(obj)
15
{
16
return typeof obj==='string'?document.getElementById(obj):obj;
17
}
18
function getObjectPosition(obj)
19
{
20
var position='';
21
if(obj.getBoundingClientRect)
22
{
23
position=obj.getBoundingClientRect();
24
return {x:position.left,y:position.top};
25
}
26
else if(document.getBoxObjectFor)
27
{
28
position=document.getBoxObjectFor(obj);
29
return {x:position.x,y:position.y};
30
}
31
else
32
{
33
var position={x:obj.offsetLeft,y:obj.offsetTop};
34
var parent=obj.offsetParent;
35
while(parent)
36
{
37
position.x+=obj.offsetLeft;
38
position.y+=obj.offsetTop;
39
parent=obj.offsetParent;
40
}
41
return position;
42
}
43
}
44
function addEventHandler(oTarget, sEventType, fnHandler) {
45
if (oTarget.addEventListener) {
46
oTarget.addEventListener(sEventType, fnHandler, false);
47
} else if (oTarget.attachEvent) {
48
oTarget.attachEvent("on" + sEventType, fnHandler);
49
} else {
50
oTarget["on" + sEventType] = fnHandler;
51
}
52
}
53
function removeEventHandler(oTarget,sEventType,fnHandler)
54
{
55
if(oTarget.removeEventListener)
56
{
57
oTarget.removeEventListener(sEventType,fnHandler,false)
58
}
59
else if(oTarget.detachEvent)
60
{
61
oTarget.detachEvent(sEventType,fnHandler);
62
}
63
else
64
{
65
// delete oTarget['on'+sEventType];
66
oTarget['on'+sEventType]=undefined;
67
}
68
}
69
function eventCallBack(e)
70
{
71
var ev=e||window.event;
72
var src=ev.srcElement || ev.target;
73
74
var srcPosition=getObjectPosition(src);
75
$('tip').innerHTML=src.tagName+'----'+src.innerHTML+'<br />position:x='+srcPosition.x+'---y='+srcPosition.y;
76
if($('tipDiv'))
77
{
78
if(document.body)
79
{
80
document.body.removeChild($('tipDiv'))
81
}
82
else
83
{
84
document.documentElement.removeChild($('tipDiv'))
85
}
86
}
87
var div=document.createElement('div');
88
div.innerHTML=src.innerHTML+' -- 的tip';
89
if(document.body)
90
{
91
document.body.appendChild(div);
92
}
93
else
94
{
95
document.documentElement.appendChild(div);
96
}
97
with(div)
98
{
99
setAttribute('id','tipDiv');
100
//IE下,通过setAttribute来给style和css指定值,虽然可以指定值,但是却在外观上不能体现出来
101
//而在FF等浏览器下就可以。
102
//div.setAttribute('style',"filter:alpha(opacity=50);position:absolute;background:red;width:150px;height:20px;border:1px solid red;z-index:11;");
103
//因此,在IE下,只有通过.style的形式来实现
104
style.filter='alpha(opacity=50)';
105
style.opacity='.2'; //for ff and so on
106
style.position='absolute';
107
style.width='150px';
108
style.height='20px';
109
style.zIndex='11';
110
style.background='red';
111
style.border='1px dashed blue';
112
style.left=srcPosition.x+50+'px';
113
style.top=srcPosition.y+'px';
114
}
115
}
116
document.onclick=function(e)
117
{
118
var ev=e||window.event;
119
var srcElement=ev.srcElement || ev.target;
120
if(srcElement.tagName.toLowerCase()!='li')
121
{
122
ev.returnValue=false;
123
}
124
else
125
{
126
if(srcElement.parentElement)
127
{
128
if(srcElement.parentElement.getAttribute('id',true)!='MyTest')
129
{
130
ev.returnValue=false;
131
}
132
}
133
}
134
}
135
window.onload=function()
136
{
137
var elements=$('MyTest').childNodes;
138
for(var i=0;i<elements.length;i++)
139
{
140
elements[i].style.cursor='pointer';
141
addEventHandler(elements[i],'click',eventCallBack);
142
}
143
}
144
</script>
145
<style>
146
#MyTest li
147
{
148
width:50px;
149
margin:5px 5px;
150
border:1px solid blue;
151
}
152
</style>
153
<ul id="MyTest">
154
<li>测试1</li>
155
<li>测试2</li>
156
<li>测试3</li>
157
<li>测试4</li>
158
<li>测试5</li>
159
</ul>
160
<ul id="MyTest2">
161
<li>测试1 </li>
162
<li>测试2</li>
163
<li>测试3</li>
164
<li>测试4</li>
165
<li>测试5</li>
166
</ul>
167
<span id="tip"></span>
168
</body>
169
</html>
![](/Images/OutliningIndicators/None.gif)
2
![](/Images/OutliningIndicators/None.gif)
3
![](/Images/OutliningIndicators/None.gif)
4
![](/Images/OutliningIndicators/None.gif)
5
![](/Images/OutliningIndicators/None.gif)
6
![](/Images/OutliningIndicators/None.gif)
7
![](/Images/OutliningIndicators/None.gif)
8
![](/Images/OutliningIndicators/None.gif)
9
![](/Images/OutliningIndicators/None.gif)
10
![](/Images/OutliningIndicators/None.gif)
11
![](/Images/OutliningIndicators/None.gif)
12
![](/Images/OutliningIndicators/None.gif)
13
![](/Images/OutliningIndicators/None.gif)
14
![](/Images/OutliningIndicators/None.gif)
15
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
16
![](/Images/OutliningIndicators/InBlock.gif)
17
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
18
![](/Images/OutliningIndicators/None.gif)
19
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
20
![](/Images/OutliningIndicators/InBlock.gif)
21
![](/Images/OutliningIndicators/InBlock.gif)
22
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
23
![](/Images/OutliningIndicators/InBlock.gif)
24
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
25
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
26
![](/Images/OutliningIndicators/InBlock.gif)
27
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
28
![](/Images/OutliningIndicators/InBlock.gif)
29
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
30
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
31
![](/Images/OutliningIndicators/InBlock.gif)
32
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
33
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
34
![](/Images/OutliningIndicators/InBlock.gif)
35
![](/Images/OutliningIndicators/InBlock.gif)
36
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
37
![](/Images/OutliningIndicators/InBlock.gif)
38
![](/Images/OutliningIndicators/InBlock.gif)
39
![](/Images/OutliningIndicators/InBlock.gif)
40
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
41
![](/Images/OutliningIndicators/InBlock.gif)
42
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
43
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
44
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
45
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
46
![](/Images/OutliningIndicators/InBlock.gif)
47
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
48
![](/Images/OutliningIndicators/InBlock.gif)
49
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
50
![](/Images/OutliningIndicators/InBlock.gif)
51
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
52
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
53
![](/Images/OutliningIndicators/None.gif)
54
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
55
![](/Images/OutliningIndicators/InBlock.gif)
56
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
57
![](/Images/OutliningIndicators/InBlock.gif)
58
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
59
![](/Images/OutliningIndicators/InBlock.gif)
60
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
61
![](/Images/OutliningIndicators/InBlock.gif)
62
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
63
![](/Images/OutliningIndicators/InBlock.gif)
64
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
65
![](/Images/OutliningIndicators/InBlock.gif)
66
![](/Images/OutliningIndicators/InBlock.gif)
67
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
68
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
69
![](/Images/OutliningIndicators/None.gif)
70
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
71
![](/Images/OutliningIndicators/InBlock.gif)
72
![](/Images/OutliningIndicators/InBlock.gif)
73
![](/Images/OutliningIndicators/InBlock.gif)
74
![](/Images/OutliningIndicators/InBlock.gif)
75
![](/Images/OutliningIndicators/InBlock.gif)
76
![](/Images/OutliningIndicators/InBlock.gif)
77
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
78
![](/Images/OutliningIndicators/InBlock.gif)
79
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
80
![](/Images/OutliningIndicators/InBlock.gif)
81
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
82
![](/Images/OutliningIndicators/InBlock.gif)
83
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
84
![](/Images/OutliningIndicators/InBlock.gif)
85
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
86
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
87
![](/Images/OutliningIndicators/InBlock.gif)
88
![](/Images/OutliningIndicators/InBlock.gif)
89
![](/Images/OutliningIndicators/InBlock.gif)
90
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
91
![](/Images/OutliningIndicators/InBlock.gif)
92
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
93
![](/Images/OutliningIndicators/InBlock.gif)
94
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
95
![](/Images/OutliningIndicators/InBlock.gif)
96
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
97
![](/Images/OutliningIndicators/InBlock.gif)
98
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
99
![](/Images/OutliningIndicators/InBlock.gif)
100
![](/Images/OutliningIndicators/InBlock.gif)
101
![](/Images/OutliningIndicators/InBlock.gif)
102
![](/Images/OutliningIndicators/InBlock.gif)
103
![](/Images/OutliningIndicators/InBlock.gif)
104
![](/Images/OutliningIndicators/InBlock.gif)
105
![](/Images/OutliningIndicators/InBlock.gif)
106
![](/Images/OutliningIndicators/InBlock.gif)
107
![](/Images/OutliningIndicators/InBlock.gif)
108
![](/Images/OutliningIndicators/InBlock.gif)
109
![](/Images/OutliningIndicators/InBlock.gif)
110
![](/Images/OutliningIndicators/InBlock.gif)
111
![](/Images/OutliningIndicators/InBlock.gif)
112
![](/Images/OutliningIndicators/InBlock.gif)
113
![](/Images/OutliningIndicators/InBlock.gif)
114
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
115
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
116
![](/Images/OutliningIndicators/None.gif)
117
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
118
![](/Images/OutliningIndicators/InBlock.gif)
119
![](/Images/OutliningIndicators/InBlock.gif)
120
![](/Images/OutliningIndicators/InBlock.gif)
121
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
122
![](/Images/OutliningIndicators/InBlock.gif)
123
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
124
![](/Images/OutliningIndicators/InBlock.gif)
125
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
126
![](/Images/OutliningIndicators/InBlock.gif)
127
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
128
![](/Images/OutliningIndicators/InBlock.gif)
129
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
130
![](/Images/OutliningIndicators/InBlock.gif)
131
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
132
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
133
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
134
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
135
![](/Images/OutliningIndicators/None.gif)
136
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
137
![](/Images/OutliningIndicators/InBlock.gif)
138
![](/Images/OutliningIndicators/InBlock.gif)
139
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
140
![](/Images/OutliningIndicators/InBlock.gif)
141
![](/Images/OutliningIndicators/InBlock.gif)
142
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
143
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
144
![](/Images/OutliningIndicators/None.gif)
145
![](/Images/OutliningIndicators/None.gif)
146
![](/Images/OutliningIndicators/None.gif)
147
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
148
![](/Images/OutliningIndicators/InBlock.gif)
149
![](/Images/OutliningIndicators/InBlock.gif)
150
![](/Images/OutliningIndicators/InBlock.gif)
151
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
152
![](/Images/OutliningIndicators/None.gif)
153
![](/Images/OutliningIndicators/None.gif)
154
![](/Images/OutliningIndicators/None.gif)
155
![](/Images/OutliningIndicators/None.gif)
156
![](/Images/OutliningIndicators/None.gif)
157
![](/Images/OutliningIndicators/None.gif)
158
![](/Images/OutliningIndicators/None.gif)
159
![](/Images/OutliningIndicators/None.gif)
160
![](/Images/OutliningIndicators/None.gif)
161
![](/Images/OutliningIndicators/None.gif)
162
![](/Images/OutliningIndicators/None.gif)
163
![](/Images/OutliningIndicators/None.gif)
164
![](/Images/OutliningIndicators/None.gif)
165
![](/Images/OutliningIndicators/None.gif)
166
![](/Images/OutliningIndicators/None.gif)
167
![](/Images/OutliningIndicators/None.gif)
168
![](/Images/OutliningIndicators/None.gif)
169
![](/Images/OutliningIndicators/None.gif)
<h3>
心静似高山流水不动,心清若巫峰雾气不沾。
</h3>
心静似高山流水不动,心清若巫峰雾气不沾。
</h3>