Js获取元素位置及动态生成元素的练习备忘

<!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

</head>
10

<body>
12

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

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;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

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>