常用js代码

1.网页上获得元素的绝对位置

经常要用到的方法，其实很简单，使用 obj.offsetLeft和obj.offsetTop是获得相对父元素的位置，所以只要遍历dom树就可以获得正确的位置了。有时候需要在html控件上覆盖一个div，这种情况下就可以用到了，代码如下：

1. function findPos(obj) {
3.     var curleft = curtop = 0;
5.     if (obj.offsetParent) {
7.        do {
9.            curleft += obj.offsetLeft;
11.            curtop += obj.offsetTop;
13.        } while (obj = obj.offsetParent);
15.     }
17.     return [curleft,curtop];
19. }

代码来自《ppk on javascript》这本书 :-)

2. ie中select的innerHtml无效的解决方法

1. var oSelect = document.createElement("select");
3. var oOption = document.createElement("option");
5. var oTextNode=document.createTextNode('test');
7. oOption.value=0;
9. oOption.appendChild(oTextNode);
11. oSelect.appendChild(oOption);
13. document.getElementById('yourid').appendChild(oSelect);

3.动态载入js

直接在dom里面插入一个<script>节点是不行的，可能在本地写程序的时候发现不了。因为直接插入<script>节点，浏览器会下载这个js文件，但是网络有延时，如果你需要在dom里面插入一个js后立即执行某个跟这个js文件有关的函数（一般的程序都会有这个需求的），那么会报错，解决这个问题，方法就是用ajax载入。下面是代码，前面两个函数是别人写的，我加了两个函数，其中callback就是要加载完成js后要执行的函数。

1. var lajax={};
2. var __count__ = 0;
3. lajax.getXmlHttp = function(){
4.     var xmlHttp = null;
5.     try {
6.         xmlHttp = new XMLHttpRequest();
7.     } 
8.     catch (e) {
9.         var progIds = ['MSXML2.XMLHTTP', 'Microsoft.XMLHTTP', 'MSXML2.XMLHTTP.5.0'
10.                       , 'MSXML2.XMLHTTP.4.0'
11.                       , 'MSXML2.XMLHTTP.3.0'];
12.         var success = false;
13.         for (var iterator = 0; (iterator < progIds.length) && (!success); iterator++) {
14.             try {
15.                 xmlHttp = new ActiveXObject(progIds[iterator]);
16.                 success = true;
17.             } 
18.             catch (e) {
19.             }
20.         }
21.         if (!success) {
22.             return null;
23.         }
24.     }
25.     return xmlHttp;
26. };
27. 
    
28. lajax.sendRequest = function(method,url,requestData,callBack)
29. {
30.     var xmlHttp = lajax.getXmlHttp();
31.     xmlHttp.open(method,url,true);    
32.     if (method=="POST") xmlHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
33.     xmlHttp.onreadystatechange = function()
34.     {
35.         if (xmlHttp.readyState == 4) {
36.             if (xmlHttp.status == 200) {
37.                 callBack(xmlHttp);
38.             }
39.         }
40.     }
41.     if (method=="POST") xmlHttp.send(requestData);
42.     else xmlHttp.send(null);
43. } 
44. lajax.loadJS = function(jsPath, callBack) {
45. var _callBack = function(xmlHttp) {
46.    __count__++;
47.    _includeJS("js" + __count__, xmlHttp.responseText);
48.    callBack();
49. }
50. lajax.sendRequest('GET',jsPath, null, _callBack);
51. }
52. 
    
53. function _includeJS(sId, source) { 
54.      if (( source != null ) && (!document.getElementById(sId))){ 
55.          var oHead = document.getElementsByTagName('HEAD').item(0); 
56.          var oScript = document.createElement( "script" ); 
57.          oScript.language = "javascript"; 
58.          oScript.type = "text/javascript"; 
59.          oScript.id = sId; 
60.          oScript.defer = true; 
61.          oScript.text = source; 
62.          oHead.appendChild(oScript); 
63.      }
64. }

4.ie6中css伪类hover无效的解决方法

这个无效的bug已经在ie7中修复，但是毕竟现在用ie6的人还不少，所以还是要需要兼容一下，代码如下：

先是js，当传入的obj为0的时候函数什么都不做，下面有例子：

1. <script language="javascript">
2. function pointToMenu(obj) {
3.    if(obj == 0) {
4.     return;
5.    }
6.    obj.className='current';
7. }
8. function pointOutMenu(obj) {
9.    if(obj == 0) {
10.     return;
11.    }
12.    obj.className='normal';
13. }
14. </script>

html代码：

1. <ul class="head-list">
2. <li class="current"
3.      onMouseOver="pointToMenu(0)"
4.      onMouseOut="pointOutMenu(0)"
5. ><a href="index.php"><span>菜单一</span></a></li>
6. <li class="normal"
7.      onMouseOver="pointToMenu(this)"
8.      onMouseOut="pointOutMenu(this)"
9. ><a href="catalog.php?catalog_id=1"><span>菜单二</span></a></li>
10. </ul>

css样式表我就省略的要怎么样的样式可以自己定义