DIV CSS 佈局教程網

近日，因工作需要，需要通過點擊某個元素後， 動態創建一個DOM元素並顯示，因此寫了一些相關的JS函數，在此記錄，以作備忘：

/**//* 
動態創建DOM元素的相關函數支持 
www.jcodecraeer.com 
*/ 
/**//* 
獲取以某個元素的DOM對象 
@obj 該元素的ID字符串 
*/ 
function getElement(obj) 
{ 
return typeof obj=='string'?document.getElementById(obj):obj; 
} 
/**//* 
獲取某個元素的位置 
@obj 該元素的DOM對象，或該元素的ID 
*/ 
function getObjectPosition(obj) 
{ 
obj=typeof obj==='string'?getElement(obj):obj; 
if(!obj) 
{ 
return; 
} 
var position=''; 
if(obj.getBoundingClientRect) //For IEs 
{ 
position=obj.getBoundingClientRect(); 
return {x:position.left,y:position.top}; 
} 
else if(document.getBoxObjectFor) 
{ 
position=document.getBoxObjectFor(obj); 
return {x:position.x,y:position.y}; 
} 
else 
{ 
position={x:obj.offsetLeft,y:obj.offsetTop}; 
var parent=obj.offsetParent; 
while(parent) 
{ 
position.x+=obj.offsetLeft; 
position.y+=obj.offsetTop; 
parent=obj.offsetParent; 
} 
return position; 
} 
} 
/**//* 
為某個DOM對象動態綁定事件 
@oTarget 被綁定事件的DOM對象 
@sEventType 被綁定的事件名，注意，不加on的事件名，如 'click' 
@fnHandler 被綁定的事件處理函數 
*/ 
function addEventHandler(oTarget, sEventType, fnHandler) 
{ 
if (oTarget.addEventListener) 
{ 
oTarget.addEventListener(sEventType, fnHandler, false); 
} 
else if (oTarget.attachEvent) //for IEs 
{ 
oTarget.attachEvent("on" + sEventType, fnHandler); 
} 
else 
{ 
oTarget["on" + sEventType] = fnHandler; 
} 
} 
/**//* 
從某個DOM對象中去除某個事件 
@oTarget 被綁定事件的DOM對象 
@sEventType 被綁定的事件名，注意，不加on的事件名，如 'click' 
@fnHandler 被綁定的事件處理函數 
*/ 
function removeEventHandler(oTarget,sEventType,fnHandler) 
{ 
if(oTarget.removeEventListener) 
{ 
oTarget.removeEventListener(sEventType,fnHandler,false) 
} 
else if(oTarget.detachEvent) //for IEs 
{ 
oTarget.detachEvent(sEventType,fnHandler); 
} 
else 
{ 
oTarget['on'+sEventType]=undefined; 
} 
} 

/**//* 
創建動態的DOM對象 
@domParams是被創建對象的屬性的JSON表達，它具有如下屬性： 
@parentNode 被創建對象所屬的父級元素(可為元素ID，也可為DOM對象） 
@domId 被創建對象的ID 
@domTag 被創建對象的tag名稱，支持常用的布局元素，如div span等，但不支持input\form等特別的元素 
@content 被創建的對象內容 
@otherAttributes 為被創建的對象添加除函數必需的屬性外其它屬性,如[{attrName:'style.color',attrValue:'red'}] 
@eventRegisters 為被創建的對象添加事件，類似[{eventType:'click',eventHandler:adsfasdf}]的數組 
-經過組合後，該參數具有如下形式: 
{parentNode:document.body,domTag:'div',content:'這是測試的',otherAttributes:[{attrName:'style.color',attrValue:'red'}],eventRegisters:[{eventType:'click',eventHandler:fnHandler}]} 
*/ 
function dynCreateDomObject(domParams) 
{ 
if(getElement(domParams.domId)) 
{ 
childNodeAction('remove',domParams.parentNode,domParams.domId); 
} 

var dynObj=document.createElement(domParams.domTag); 

with(dynObj) 
{ 
//id也可以通過otherAttributes傳入，但是出於ID的特殊性，此處仍然采用 
//JSON對象傳入，並以DOM ID屬性附件 
id=domParams.domId; 
innerHTML=domParams.content; //innerHTML是DOM屬性，而id等是元素屬性，注意區別 
} 
/**//*添加屬性*/ 
if(null!=domParams.otherAttributes) 
{ 
for(var i=0;i<domParams.otherAttributes.length;i++) 
{ 
var otherAttribute =domParams.otherAttributes[i]; 
dynObj.setAttribute(otherAttribute.attrName,otherAttribute.attrValue); 
} 
} 
/**//*end 添加屬性*/ 
/**//*添加相關事件*/ 
if(null!=domParams.eventRegisters) 
{ 
for(var i=0;i<domParams.eventRegisters.length;i++) 
{ 
var eventRegister =domParams.eventRegisters[i]; 
addEventHandler(dynObj,eventRegister.eventType,eventRegister.eventHandler); 
} 
} 
/**//*end 添加相關事件*/ 
try 
{ 
childNodeAction('append',domParams.parentNode,dynObj); 
} 
catch($e) 
{ 

} 

return dynObj; 
} 
/**//* 
從父結點中刪除子結點 
@actionType 默認為append,輸入字符串 append | remove 
@parentNode 父結點的DOM對象，或者父結點的ID 
@childNode 被刪除子結點的DOM對象 或者被刪除子結點的ID 
*/ 
function childNodeAction(actionType,parentNode,childNode) 
{ 
if(!parentNode) 
{return; } 


parentNode=typeof parentNode==='string'?getElement(parentNode):parentNode; 
childNode=typeof childNode==='string'?getElement(childNode):childNode; 
if(!parentNode || !childNode) 
{return;} 

var action=actionType.toLowerCase(); 
if( null==actionType || action.length<=0 || action=='append') 
{ 
action='parentNode.appendChild'; 
} 
else 
{ 
action='parentNode.removeChild'; 
} 

try 
{ 
eval(action)(childNode); 
} 
catch($e) 
{ 
alert($e.message); 
} 
} 

使用示例：

var htmlAttributes= 
[

{attrName:'class',attrValue:'樣式名稱'} //for IEs

,

{attrName:'className',attrValue: '樣式名稱'} //for ff

] 

var domParams={domTag:'div', content:'動態div的innerHTML', otherAttributes:htmlAttributes};

var newHtmlDom=dynCreateDomObject(domParams);

//通過setAttribute('style','position:absolute.....................')

//的形式來指定style沒有效果，只能通過如下形式,jiong

newHtmlDom.style.zIndex='8888';

newHtmlDom.style.position='absolute';

newHtmlDom.style.left='100px';

newHtmlDom.style.top='200px';