जावास्क्रिप्ट के साथ एक बार में एक तत्व के लिए कई विशेषताएँ सेट करना

Question

मैं जावास्क्रिप्ट के साथ एक साथ कई विशेषताओं को कैसे सेट कर सकता हूं? दुर्भाग्य से, मैं इस परियोजना पर jQuery जैसे ढांचे का उपयोग करने में सक्षम नहीं हूं। यहाँ अब मेरे पास क्या है:

var elem = document.createElement("img");

elem.setAttribute("src", "http://example.com/something.jpeg");
elem.setAttribute("height", "100%");
elem.setAttribute("width", "100%");

Comments

@Quantastical के उपयोग से उत्तर Object.assign()उन लोगों के लिए एक नज़र के लायक है जो एक सहायक फ़ंक्शन नहीं बनाना चाहते हैं - "सभी असंख्य और स्वयं के गुणों" के लिए काम करता है ।

— 20

मैंने सभी उत्तरों के माध्यम से स्क्रॉल किया, उम्मीद है कि 7 वर्षों में जब से यह सवाल पोस्ट किया गया था कि किसी प्रकार का ES7 अपडेट होगा, जिससे हम अपने स्वयं के फंक्शन को लिखना पसंद नहीं करते हैं जैसे @ एरियल का उत्तर

— krummens

Answer 1

आप एक सहायक कार्य कर सकते हैं:

function setAttributes(el, attrs) {
  for(var key in attrs) {
    el.setAttribute(key, attrs[key]);
  }
}

इसे इस तरह से कॉल करें:

setAttributes(elem, {"src": "http://example.com/something.jpeg", "height": "100%", ...});

Comments

अच्छा यह एक बार भी नहीं है, इसलिए प्रदर्शन पर कोई प्रभाव नहीं पड़ेगा।

— vsync

यह वह नहीं है जो उसने पूछा। हमें यह जानने की जरूरत है कि प्रदर्शन में सुधार कैसे किया जाए

— jbartolome

@jbartolome - शब्द "प्रदर्शन" का उल्लेख एक बार प्रश्न में नहीं किया गया है। मुझे नहीं पता कि आपको वह धारणा कहां से मिली। यह प्रश्न elem.setAttribute()कई बार मैन्युअल रूप से कॉल न करने के तरीके की तलाश में प्रतीत होता है ।

— २०

मुझे यकीन नहीं है कि प्रश्न वास्तव में क्या चाहता है। एक अच्छा संभव वांछित परिणाम विशेषताचैन कॉलबैक "केवल एक बार" कॉल करना है। अगर मुझे एक ऐसे फ़ंक्शन को कॉल करने की आवश्यकता है जो दो विशेषताओं पर निर्भर करता है, तो आमतौर पर विशेषताचैल्कॉलबैक को दो बार कहा जाता है, प्रत्येक विशेषता परिवर्तन के लिए एक। दोनों विशेषताओं के लिए इस .getAttribute ('your-attr') को एक्सेस करना और उनमें से एक खाली होने पर बाहर निकलना पहला समाधान है लेकिन यह केवल उस मामले को हैंडल नहीं करता है जहां केवल एक विशेषता सेट की गई है, और दूसरे का पहले से ही एक पिछला मान है । लेकिन भगवान मदद करता है यह सवाल वास्तव में उद्देश्य नहीं है। आसान नहीं है!

— व्लादिमीर ब्रासील

Answer 2

आप Object.assign(...)अपने गुणों को बनाए गए तत्व पर लागू करने के लिए उपयोग करने में सक्षम हो सकते हैं । अतिरिक्त विवरण के लिए टिप्पणियां देखें।

ध्यान रखें कि heightऔर widthविशेषताओं को पिक्सेल में परिभाषित किया जाता है , न कि पेरेसेंट में। इसे तरल बनाने के लिए आपको CSS का उपयोग करना होगा।

var elem = document.createElement('img')
Object.assign(elem, {
  className: 'my-image-class',
  src: 'https://dummyimage.com/320x240/ccc/fff.jpg',
  height: 120, // pixels
  width: 160, // pixels
  onclick: function () {
    alert('Clicked!')
  }
})
document.body.appendChild(elem)

// One-liner:
// document.body.appendChild(Object.assign(document.createElement(...), {...}))

.my-image-class {
  height: 100%;
  width: 100%;
  border: solid 5px transparent;
  box-sizing: border-box
}

.my-image-class:hover {
  cursor: pointer;
  border-color: red
}

body { margin:0 }

Comments

प्रॉपर्टीज, एलएम.हाईट आदि, केवल पढ़ने योग्य हैं, इसलिए यह विफल हो जाता है। मैंने विवरणकर्ताओं को देखा, और वे केवल एक गेटटर (अपरिभाषित सेटर) के साथ एक्सेसर्स हैं।

— जूसी

@lukeuser टिप्पणी के लिए धन्यवाद। मुझे नहीं पता था कि वे गुण केवल-पढ़ने के लिए थे।

— उपयोगकर्ता

आपके प्रश्न के बारे में "क्या आप बस नहीं कर सकते ..." मैंने यह तब पूछा जब आप वास्तव में बस नहीं कर सकते थे।

— जेपी सिल्वाशी

@JPSilvashy मैं अपने "आप बस नहीं कर सकता" के लिए इरादा नहीं था कि वह बिटलीलिंग के रूप में आ सके या श्रेष्ठता का संकेत दिखा सके। क्षमा करें अगर यह किया। मुझे ईमानदारी से यकीन नहीं था कि यह एक उपयुक्त उत्तर होगा क्योंकि मैं कोई जावास्क्रिप्ट निंजा नहीं हूं, इसलिए मैं उम्मीद कर रहा था कि लॉजिकर जैसे अन्य लोग तर्क को ठोस बनाने में मदद कर सकते हैं।

— उपयोगकर्ता

Answer 3

यदि आप एक ढाँचा-esq वाक्य-विन्यास चाहते थे ( नोट: IE 8+ केवल समर्थन), तो आप Elementप्रोटोटाइप का विस्तार कर सकते हैं और अपनी स्वयं की सूची जोड़ सकते हैं setAttributes:

Element.prototype.setAttributes = function (attrs) {
    for (var idx in attrs) {
        if ((idx === 'styles' || idx === 'style') && typeof attrs[idx] === 'object') {
            for (var prop in attrs[idx]){this.style[prop] = attrs[idx][prop];}
        } else if (idx === 'html') {
            this.innerHTML = attrs[idx];
        } else {
            this.setAttribute(idx, attrs[idx]);
        }
    }
};

यह आपको इस तरह से वाक्यविन्यास का उपयोग करने देता है:

var d = document.createElement('div');
d.setAttributes({
    'id':'my_div',
    'class':'my_class',
    'styles':{
        'backgroundColor':'blue',
        'color':'red'
    },
    'html':'lol'
});

इसे आज़माएं: http://jsfiddle.net/ywrXX/1/

यदि आप एक होस्ट ऑब्जेक्ट ( कुछ विरोध कर रहे हैं ) का विस्तार करना पसंद नहीं करते हैं या IE7- का समर्थन करने की आवश्यकता है, तो इसे फ़ंक्शन के रूप में उपयोग करें

ध्यान दें कि IE, या घटना संचालकों के setAttributeलिए काम नहीं करेगा style(आप वैसे भी नहीं होना चाहिए)। उपरोक्त कोड संभालता है style, लेकिन ईवेंट नहीं।

प्रलेखन

• MDN पर ऑब्जेक्ट प्रोटोटाइप - https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/prototype
• setAttributeMDN पर - https://developer.mozilla.org/en-US/docs/DOM/element.setAoint

Comments

रिकॉर्ड के लिए: IE7 ->'Element' is undefined

— KooiInc

हाँ, काफी उचित है। IE7 और उनके COM वस्तुओं के बारे में भूल गए। आप इसे ओवरलोड कर सकते हैं document.createElementऔर document.getElementByIdइसे हिला सकते हैं .... या किसी फ़ंक्शन में कार्यक्षमता को लपेट सकते हैं। उस नोट को शामिल करने के लिए संपादित जवाब

— क्रिस बेकर

अधिक सरलीकृत पुनरावर्ती संस्करण: jsfiddle में

— केल्को

मुझे वास्तव में केल्को सरलीकृत संस्करण पसंद है! केवल एक चीज है, आपके संस्करण में, आपके JSFiddle में कोई इनरटेक्स्ट नहीं है। मैंने और जोड़ने की कोशिश की अगर ([प्रोप] === html) {this.innerHTML = सेट [प्रोप]; } और यह काम नहीं किया। मुझे एक त्रुटि मिलती है। मैं एक इनर टेक्स्ट सेटिंग कैसे जोड़ सकता हूं?

— जेसिका

यह उत्तर आपको एक एकल ऑब्जेक्ट का उपयोग करने की अनुमति देता है जिसमें तत्व गुण, सीएसएस गुण (संभावित रूप से एक नेस्टेड ऑब्जेक्ट), और इनर HTML शामिल हैं। यह यह भी दर्शाता है कि इसका उपयोग कैसे करें तत्व प्रोटोटाइप (हम्म) को संशोधित करें या इसे सामान्य फ़ंक्शन (आह) के रूप में उपयोग करें। अच्छी नौकरी!

— एंड्रयू विल्म्स

Answer 4

आप एक फ़ंक्शन बना सकते हैं जो एक तर्क संख्या को ले जाता है:

function setAttributes(elem /* attribute, value pairs go here */) {
    for (var i = 1; i < arguments.length; i+=2) {
        elem.setAttribute(arguments[i], arguments[i+1]);
    }
}

setAttributes(elem, 
    "src", "http://example.com/something.jpeg",
    "height", "100%",
    "width", "100%");

या, आप किसी ऑब्जेक्ट पर विशेषता / मान जोड़े पास करते हैं:

 function setAttributes(elem, obj) {
     for (var prop in obj) {
         if (obj.hasOwnProperty(prop)) {
             elem[prop] = obj[prop];
         }
     }
 }

setAttributes(elem, {
    src: "http://example.com/something.jpeg",
    height: "100%",
    width: "100%"
});

---

आप अपनी स्वयं की श्रृंखला योग्य वस्तु आवरण / विधि भी बना सकते हैं:

function $$(elem) {
    return(new $$.init(elem));
}

$$.init = function(elem) {
    if (typeof elem === "string") {
        elem = document.getElementById(elem);
    }
    this.elem = elem;
}

$$.init.prototype = {
    set: function(prop, value) {
        this.elem[prop] = value;
        return(this);
    }
};

$$(elem).set("src", "http://example.com/something.jpeg").set("height", "100%").set("width", "100%");

काम करने का उदाहरण: http://jsfiddle.net/jfriend00/qncEz/

Answer 5

आप एक ES5.1 हेल्पर फ़ंक्शन कोड कर सकते हैं:

function setAttributes(el, attrs) {
    Object.keys(attrs).forEach(key => el.setAttribute(key, attrs[key]));
}

इसे इस तरह से कॉल करें:

setAttributes(elem, { src: 'http://example.com/something.jpeg', height: '100%' });

Answer 6

const setAttributes = (el, attrs) =>
  Object.entries(attrs)
    .forEach(args =>
      el.setAttribute(...args))

Answer 7

या एक फ़ंक्शन बनाएं जो पैरामीटर से विशेषताओं सहित एक तत्व बनाता है

function elemCreate(elType){
  var element = document.createElement(elType);
  if (arguments.length>1){
    var props = [].slice.call(arguments,1), key = props.shift();
    while (key){ 
      element.setAttribute(key,props.shift());
      key = props.shift();
    }
  }
  return element;
}
// usage
var img = elemCreate('img',
            'width','100',
            'height','100',
            'src','http://example.com/something.jpeg');

FYI करें: height/width='100%'विशेषताओं का उपयोग करके काम नहीं करेगा। 100% की ऊंचाई / चौड़ाई के लिए आपको तत्वों की आवश्यकता होती हैstyle.height/style.width

Comments

@vsync जबकि मैं आपके यादृच्छिक डाउनवोट और अपमान की सराहना करता हूं, इस और किसी अन्य उत्तर के बीच थोड़ा मौलिक अंतर है। शांत हो जाओ।

— क्रिस बेकर

@ क्रिस - यह यादृच्छिक रूप से हाँ था, क्योंकि मैं इसके बजाय इस उत्तर को बढ़ावा देना चाहता था, इसलिए मुझे इसके ऊपर के उत्तर को रद्द करना पड़ा। और हां, यदि आपके पास 1000 आइटम हैं और आपको प्रत्येक के लिए 5 विशेषताओं को बदलना होगा, तो उन्हें DOM 5000 बार एक्सेस करने की तुलना में नई विशेषताओं के साथ फिर से बनाना सबसे अच्छा होगा, क्या आप सहमत नहीं होंगे?

— विस्कॉन्सिन

@vsync यदि आप अपने उपयोग के मामले से संबंधित विशेष प्रदर्शन पर विचार किए बिना एक यादृच्छिक प्रतिलिपि / पेस्ट फ़ंक्शन का उपयोग कर रहे हैं, जो स्टैकऑवरफ़्लो पर पाया गया है, तो आपके पास संभवतः एक बड़ा मुद्दा है। इसके अलावा, आपके द्वारा अस्वीकृत उत्तर में, DOM को 5000 बार एक्सेस नहीं किया जाएगा, इस उत्तर से अधिक नहीं - दोनों ही मामलों में, प्रश्न में तत्व को DOM ट्री में नहीं डाला गया है। यह जवाब और मेरा एक ही काम है, हम बस गुणों को अलग तरीके से पुनरावृत्त करते हैं।

— क्रिस बेकर

@ क्रिस - यह सवाल मुझे चिंतित नहीं करता है। तुम मेरे बारे में क्यों बात कर रहे हो और मैं क्या करूं या नहीं? यह अप्रासंगिक है। यदि आपका DOM बहुत से नोड्स के गुणों को बदलने की आवश्यकता है, तो आपका उत्तर बहुत अच्छा नहीं है, जबकि यह उत्तर थोड़ा बेहतर है, क्योंकि यह सोचने के अच्छे तरीके को बढ़ावा देता है, जहाँ आप सभी विशेषताओं और फिर से नोड को फिर से बनाते हैं- इसे DOM में इंस्टॉल करें। यह भी आदर्श नहीं है, क्योंकि cloneविधि का उपयोग करना पसंद किया जाएगा। खरोंच से पूरे नोड बनाने की आवश्यकता नहीं है। वैसे भी, DOM का उपयोग कम से कम करना, सबसे आम उपयोग के मामले में यह सर्वोच्च प्राथमिकता है।

— vsync

@vsync "आप" शब्द का उपयोग एक सार अर्थ में किया जाता है, न कि आपको एक व्यक्ति के रूप में अर्थ दिया जाता है (जो कि मुझे पूरा यकीन है कि आप, vsynch, जानते हैं) लेकिन इन उत्तरों के काल्पनिक भविष्य के उपभोक्ता के लिए। एक बार फिर, दो जवाब फ़ंक्शन में समान हैं। आप वोट करने के लिए स्वतंत्र हैं कि आप कैसे चाहते हैं, भले ही आपका तर्क त्रुटिपूर्ण हो (बेंचमार्क चेक करें), लेकिन अपनी कृपालु टिप्पणियों को अपने तक ही रखें।

— क्रिस बेकर

Answer 8

इसे इस्तेमाल करे

function setAttribs(elm, ob) {
    //var r = [];
    //var i = 0;
    for (var z in ob) {
        if (ob.hasOwnProperty(z)) {
            try {
                elm[z] = ob[z];
            }
            catch (er) {
                elm.setAttribute(z, ob[z]);
            }
        }
    }
    return elm;
}

डेमो: यहाँ

Answer 9

आप बस एक तरीका जोड़ सकते हैं (setAttributes, "s" के साथ अंत में) "Element" प्रोटोटाइप जैसे:

Element.prototype.setAttributes = function(obj){
  for(var prop in obj) {
    this.setAttribute(prop, obj[prop])
  }
}

आप इसे एक पंक्ति में परिभाषित कर सकते हैं:

Element.prototype.setAttributes = function(obj){ for(var prop in obj) this.setAttribute(prop, obj[prop]) }

और आप इसे सामान्य रूप से कॉल कर सकते हैं क्योंकि आप अन्य विधियों को कॉल करते हैं। ऑब्जेक्ट के रूप में विशेषताएँ दी गई हैं:

elem.setAttributes({"src": "http://example.com/something.jpeg", "height": "100%", "width": "100%"})

यदि दिए गए तर्क ऑब्जेक्ट नहीं हैं, तो आप एक त्रुटि को फेंकने के लिए एक स्टेटमेंट जोड़ सकते हैं।

Comments

अब समझ में आता है। मैं सोच रहा था कि एक पूर्वनिर्धारित समारोह में इस तरह का बदलाव कैसे किया जाए। धन्यवाद!

— परीक्षण_ 22

Answer 10

एक ही समय में विशेषताएँ बनाने और सेट करने के लिए इस फ़ंक्शन का उपयोग करें

function createNode(node, attributes){
    const el = document.createElement(node);
    for(let key in attributes){
        el.setAttribute(key, attributes[key]);
    }
    return el;
}

इसे ऐसे उपयोग करें

const input = createNode('input', {
    name: 'test',
    type: 'text',
    placeholder: 'Test'
});
document.body.appendChild(input);

Answer 11

मुझे लगता है कि इस वर्ग में किसी भी तत्व के लिए एक बार में विशेषताओं को सेट करना सबसे अच्छा तरीका है।

function SetAtt(elements, attributes) {
    for (var element = 0; element < elements.length; element++) {
        for (var attribute = 0; attribute < attributes.length; attribute += 2) {
            elements[element].setAttribute(attributes[attribute], attributes[attribute + 1]);
        }
    }
}
var Class = document.getElementsByClassName("ClassName"); // class array list
var Data = ['att1', 'val1', 'att2', 'val2', 'att3', 'val3']; //attributes array list
SetAtt(Class, Data);