في الآونة الأخيرة ، نظرًا لاحتياجات العمل ، أحتاج إلى إنشاء عنصر DOM ديناميكيًا بعد النقر على عنصر وعرضه. لذلك ، كتبت بعض وظائف JS ذات الصلة وسجلتها هنا لتقديم مذكرة:
/** //*الوظائف ذات الصلة لإنشاء عناصر DOM ديناميكيًا تدعم www.jcodecraeer.com*//** //*احصل على كائن DOM لعنصر معين @OBJ معرف*/وظيفة getElement (obj) {return typeof obj == 'string'؟ document.getElementByid (obj): obj ؛ }/** //*احصل على موضع عنصر dom @OBJ للعنصر ، أو معرف العنصر*/وظيفة 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} ؛ } if 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 ؛ بينما (الأصل) {position.x+= obj.offsetleft ؛ position.y+= obj.offsettop ؛ الوالدين = obj.offsetParent ؛ } موقف الإرجاع ؛ }}/** //*ربط الحدث ديناميكيًا لكائن DOM كائن DOM الخاص بـ enter event seventtype اسم الحدث المربوطة ، لاحظ أنه لم يتم إضافة اسم الحدث ، مثل "click'fnHandler the pound therder function*/function addeventhandler (otarget ، seventtype ، fnhandler) { otarget.addeventListener (SeventType ، fnhandler ، false) ؛ } آخر إذا (otarget.attachevent) // for ies {otarget.attachevent ("on" + seventType ، fnhandler) ؛ } آخر {otarget ["on" + seventType] = fnhandler ؛ }}/** //*قم بإزالة حدث من كائن DOM OBENTARGET كائن DOM الخاص بحدث pound seventtype اسم الحدث المربوطة ، لاحظ أنه لم يتم إضافة اسم الحدث ، مثل 'click'fnHandler the Bound the event function*/function removeEventHandler (otarget ، seventtype ، fnhandler) {if (otarget. Otarget.RemoveEventListener (SeventType ، fnhandler ، false)} آخر إذا (otarget.detachevent) // for ies {otarget.detachevent (السابع ، fnhandler) ؛ } else {otarget ['on'+seventType] = غير محدد ؛ } ستر الإدخال/النموذج ، content محتوى الكائن الذي تم إنشاؤه othattributes إضافة سمات أخرى باستثناء السمات اللازمة للوظيفة التي سيتم إنشاؤها ، مثل [{attrname: 'style.color' ، attrvalue: 'red'}] النموذج: {parentNode: document.body ، domtag: 'div' ، المحتوى: 'هذا يتم اختباره' ، otheratributes: [{attrname: 'style.color' ، attrvalue: 'red'}] ، eventregisters: [{eventtype: 'click' ، eventHandler: fnhandler}] if (getElement (domparams.domid)) {childnodeAction ('remove' ، domparams.parentnode ، domparams.domid) ؛ } var dynobj = document.createElement (domparams.domtag) ؛ مع (dynobj) {// id يمكن أيضًا تمريرها من خلال OtherAttributes ، ولكن بسبب تخصص المعرف ، لا يزال كائن // JSON يستخدم هنا ، ويتم إرفاق سمة معرف DOM بـ ID = DOMPARAMS.DOMID ؛ innerhtml = domparams.content ؛ // innerhtml هي سمة DOM ، في حين أن ID etc هي سمات العناصر ، انتبه إلى الفرق}/** //*إضافة سمة*/if (null! = domparams.othertributes) {for (var i = 0 ؛ i <bomparams.otherattributes.length ؛ i ++) dynobj.setattribute (otherattribute.attrName ، otherattribute.attrvalue) ؛ }}/** //*end Add Adtribute*//** //*إضافة الأحداث ذات الصلة*/if (null! = domparams.eventregisters) {for (var i = 0 ؛ i <domparams.eventregisters AddEventHandler (DynobJ ، eventregister.eventtype ، eventregister.eventHandler) ؛ }}/** //*end أضف الأحداث ذات الصلة*/try {childnodeAction ('APPEND' ، Domparams.ParentNode ، dynobj) ؛ } catch ($ e) {} return dynobj ؛ }/*: إزالة @parentNode كائن DOM للعقدة الأصل ، أو معرف العقدة الأصل childNode تم حذف كائن DOM للعقدة الطفل أو تم حذف معرف العقدة الطفل */ وظيفة 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' ؛ } آخر {Action = 'parentNode.removechild' ؛ } حاول {eval (Action) (childnode) ؛ } catch ($ e) {Alert ($ e.message) ؛ }}مثال على الاستخدام:
var htmlattributes = [{attrname: 'class' ، attrvalue: 'style name'} // for ies ، {attrname: 'classname' ، attrvalue: 'style name'} // for ff] var domparams = {domtag: 'div' ، 'div' innerhtml of dynamic '، htmlate. var newhtmldom = dyncreatedomobject (domparams) ؛ // حدد النمط من خلال setAttribute النموذج ('style' ، 'الموضع: absolute ............') // ليس له أي تأثير. لا يمكن القيام به إلا من خلال النموذج التالي ، jiongnewhtmldom.style.zindex = '8888' ؛ newhtmldom.style.position = 'absolute' ؛ newhtmldom.style.left = '100px' ؛ newhtmldom.style.top = '200px' ؛