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
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>
<!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
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
else32
{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
else64
{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
else83
{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
else94
{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 on106
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
else125
{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 li147
{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>
<h3>
心静似高山流水不动，心清若巫峰雾气不沾。
</h3>
心静似高山流水不动，心清若巫峰雾气不沾。
</h3>
