জাভাস্ক্রিপ্ট সহ একবারে একটি উপাদানের জন্য একাধিক বৈশিষ্ট্য নির্ধারণ করা

Question

আমি কীভাবে জাভাস্ক্রিপ্ট দিয়ে একসাথে একাধিক বৈশিষ্ট্য সেট করতে পারি? দুর্ভাগ্যক্রমে, আমি এই প্রকল্পে jQuery এর মতো কাঠামো ব্যবহার করতে পারছি না। আমার এখন যা আছে তা এখানে:

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

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

Comments

@ কোয়ান্টাস্টিকাল ব্যবহার করে উত্তরগুলি Object.assign()তাদের পক্ষে নজর দেওয়া উচিত যা কোনও সহায়ক ফাংশন তৈরি করতে চায় না - "সমস্ত গণনাযোগ্য এবং নিজস্ব সম্পত্তি" এর জন্য কাজ করে।

— benvc

আমি সমস্ত উত্তরের মাধ্যমে স্ক্রোল করেছিলাম, এই আশায় যে years বছরে এই প্রশ্নটি পোস্ট করা হয়েছিল যে কোনও ধরণের ES7 আপডেট হবে, এটি তৈরি করে যাতে আমাদের @

— অ্যারিলের

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

@ জবার্তোলোম - "পারফরম্যান্স" শব্দটি প্রশ্নটিতে একবারও উল্লেখ করা হয়নি। আমি জানি না আপনি এই ধারণাটি কোথা থেকে পেয়েছেন। প্রশ্নটি elem.setAttribute()একাধিকবার ম্যানুয়ালি কল না করার জন্য কোনও উপায় খুঁজছে বলে মনে হচ্ছে ।

— jender00

প্রশ্নটি আসলে কী চায় আমি নিশ্চিত নই। একটি ভাল সম্ভাব্য কাঙ্ক্ষিত ফলাফলটি অ্যাট্রিবিউট চ্যাঞ্জডক্যালব্যাককে "শুধুমাত্র একবার" কল করা। যদি আমাকে এমন কোনও ফাংশন কল করতে হবে যা দুটি বৈশিষ্ট্যের উপর নির্ভর করে, সাধারণত অ্যাট্রিবিউটচ্যানডক্যালব্যাক দুটি বার বলা হয়, প্রতিটি বৈশিষ্ট্য পরিবর্তনের জন্য একটি। উভয় বৈশিষ্ট্যের জন্য এই.গেট্যাট্রিবিউট ('আপনার অ্যাটার') অ্যাক্সেস করা এবং এর মধ্যে একটির এখনও শূন্য থাকলে উপস্থিত হওয়া প্রথম সমাধান তবে এটি কেবলমাত্র একটি বৈশিষ্ট্য নির্ধারিত ক্ষেত্রে কেস পরিচালনা করে না এবং অন্যটির ইতিমধ্যে পূর্ববর্তী মান রয়েছে । কিন্তু helpsশ্বর সাহায্য করেন এটি আসলে উদ্দেশ্য উদ্দেশ্য নয়। সহজ নয়!

— ভ্লাদিমির ব্রাসিল

Answer 2

আপনি ব্যবহার করতে সক্ষম হতে পারে Object.assign(...) তৈরি করা উপাদানটিতে আপনার সম্পত্তি প্রয়োগ । অতিরিক্ত বিশদ জন্য মন্তব্য দেখুন।

মনে রাখবেন heightএবং widthগুণাবলী পার্সেন্ট নয়, পিক্সেল সংজ্ঞায়িত করা হয় । এটিকে তরল করতে আপনাকে সিএসএস ব্যবহার করতে হবে।

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

@ ব্লুকিউর মন্তব্যের জন্য আপনাকে ধন্যবাদ। আমি জানতাম না যে এই সম্পত্তিগুলি কেবল পঠনযোগ্য।

— ব্যবহারকারী

"আপনি কি ঠিক পারেননি ..." সম্পর্কে আপনার প্রশ্নের জবাবে আমি এটি সম্ভবত জিজ্ঞাসা করেছি যখন আপনি আসলে ঠিক করতে পারেন না।

— জেপি সিলভাশি

@ জে পি এসসিলভাশী আমার "আমার পক্ষে আপনি পারেন না" বেল্টলিং হিসাবে আসতে বা শ্রেষ্ঠত্বের চিহ্ন দেখাতে চাইনি। দুঃখিত যদি এটা না। আমি সত্যিই নিশ্চিত ছিলাম না যে এটি জাভাস্ক্রিপ্ট নিনজা না হওয়ায় এটি একটি উপযুক্ত উত্তর হতে পারত, তাই আমি আশা করছিলাম যে লুকুয়েজারের মতো অন্যরাও যুক্তি আরও দৃ .় করতে সাহায্য করবে।

— ব্যবহারকারী

Answer 3

যদি আপনি কোনও কাঠামো-এসকিউ সিনট্যাক্স চান ( দ্রষ্টব্য: আইই 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/

আপনি যদি হোস্ট অবজেক্টটি প্রসারিত করতে পছন্দ করেন না ( কেউ কেউ বিরোধিতা করছেন ) বা আই 7- সমর্থন করতে চান তবে কেবল এটি একটি ফাংশন হিসাবে ব্যবহার করুন

মনে রাখবেন যে আইই, বা ইভেন্ট হ্যান্ডলারগুলির setAttributeজন্য কার্যকর হবে না style(আপনার কোনওভাবেই চলবে না)। উপরের কোডটি পরিচালনা করেstyle তবে ইভেন্টগুলি নয়।

ডকুমেন্টেশন

• MDN- তে আপত্তি প্রোটোটাইপ - https://developer.mozilla.org/en-US/docs/ জাভা স্ক্রিপ্ট / রেফারেন্স / গ্লোবাল_অবজেক্টস / অবজেক্ট / প্রোটোটাইপ
• setAttributeএমডিএন - https://developer.mozilla.org/en-US/docs/DOM/element.setAttribute এ

Comments

রেকর্ডের জন্য: 'Element' is undefined

— আই

হ্যাঁ, যথেষ্ট ন্যায্য। আই 7 এবং তাদের COM অবজেক্ট সম্পর্কে ভুলে গেছেন। আপনি ওভারলোড করতে পারেন document.createElementএবং document.getElementByIdএটি শিম করতে পারেন .... বা কেবল কোনও কার্যক্রমে কার্যকারিতাটি মোড়তে পারেন । এই নোটটি অন্তর্ভুক্ত করার জন্য সম্পাদিত উত্তর

— ক্রিস বেকার

আরও সরলিকৃত পুনরাবৃত্ত সংস্করণ: jsfiddle একটি আই শিম অন্তর্ভুক্ত

— ক্লেকো

আমি সত্যিই সরলিকৃত সংস্করণ কেলেকো পছন্দ করি! কেবলমাত্র আপনার সংস্করণে, আপনার জেএসফিডেলে কোনও অভ্যন্তরীণ পাঠ্য নেই। আমি যদি [[প্রোপ] === এইচটিএমএল) তে অন্য যুক্ত করার চেষ্টা করেছি {this.innerHTML = সেট [প্রোপ]; } এবং এটি কার্যকর হয়নি। আমি একটি ত্রুটি পেয়েছি। আমি কীভাবে একটি অভ্যন্তরীণ পাঠ্য সেটিংস যুক্ত করতে পারি?

— জেসিকা

এই উত্তরটি আপনাকে এমন একটি একক বস্তু ব্যবহার করতে দেয় যাতে উপাদান বৈশিষ্ট্য, CSS বৈশিষ্ট্য (কোনও নেস্টেড বস্তুর মধ্যে সম্ভাব্য) এবং অভ্যন্তরীণ এইচটিএমএল থাকে। এটি এলিমেন্ট প্রোটোটাইপ (এইচএমএমএম) পরিবর্তন করতে বা এটি একটি সাধারণ ফাংশন (আহহ) হিসাবে কীভাবে ব্যবহার করতে হয় তাও দেখায়। চমৎকার কাজ!

— অ্যান্ড্রু উইলিয়ামস

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/jender00/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');

এফওয়াইআই: height/width='100%'গুণাবলী ব্যবহার করে কাজ করবে না। 100% উচ্চতা / প্রস্থের জন্য আপনার উপাদানগুলির প্রয়োজনstyle.height/style.width

Comments

@vsync আমি আপনার এলোমেলো ডাউনওট এবং অপমানের প্রশংসা করার সময়, এখানে এবং অন্য কোনও উত্তরের মধ্যে সামান্য মৌলিক পার্থক্য রয়েছে। শান্ত হও.

— ক্রিস বেকার

@ ক্রিস - এটি এলোমেলো হ্যাঁ, কারণ আমি পরিবর্তে এই উত্তরটি প্রচার করতে চেয়েছিলাম, সুতরাং এর উত্তরটি আমার নীচে নামিয়ে ফেলতে হয়েছিল। এবং হ্যাঁ, আপনার যদি 1000 টি আইটেম থাকে এবং আপনার অবশ্যই প্রতিটিটির জন্য 5 টি বৈশিষ্ট্য পরিবর্তন করতে হবে তবে ডেমকে 5000 বার অ্যাক্সেস করার চেয়ে নতুন বৈশিষ্ট্যগুলি দিয়ে সেগুলি পুনরায় তৈরি করা ভাল, আপনি কি সম্মত হবেন না?

— vsync

@vsync যদি আপনি স্ট্যাক-ওভারফ্লোতে আপনার ব্যবহারের ক্ষেত্রে বিশেষ পারফরম্যান্স সম্পর্কিত বিশেষ পারফরম্যান্স বিবেচনা না করে খুঁজে পেয়েছেন এমন কোনও এলোমেলো অনুলিপি / পেস্ট ফাংশন ব্যবহার করছেন তবে আপনার সম্ভবত আরও বড় সমস্যা রয়েছে। তদ্ব্যতীত, আপনি যে উত্তোলন করেছেন তার উত্তরে, ডিওএম 5000 বার অ্যাক্সেস করা যাবে না, এই উত্তর ছাড়া আর কিছুই হবে না - উভয় ক্ষেত্রেই, প্রশ্নের মধ্যে থাকা উপাদানটি ডিওএম ট্রিতে প্রবেশ করা যায় নি। এই উত্তর এবং আমার একই কাজ, আমরা সহজেই বৈশিষ্ট্যগুলি পৃথকভাবে পুনরাবৃত্তি করি।

— ক্রিস বেকার

@ ক্রিস - এই প্রশ্নটি আমার উদ্বেগের নয়। আপনি আমার সম্পর্কে কেন কথা বলছেন এবং আমি কি করি বা করি না? এটা অপ্রাসঙ্গিক। আপনার উত্তরটি খুব ভাল হয় না যদি কোনও ডিওমে নিজেই অনেকগুলি নোডের বৈশিষ্ট্যগুলি পরিবর্তন করতে হয় তবে এই উত্তরটি কিছুটা ভাল কারণ এটি একটি ভাল চিন্তাভাবনার প্রচার করে, যেখানে আপনি সমস্ত বৈশিষ্ট্য সহ নোডটি পুনরায় তৈরি করেন এবং পুনরায়- এটি ডিওমে ইনস্টল করুন। এটিও আদর্শ নয়, কারণ cloneপদ্ধতিটি ব্যবহার করা পছন্দ করা উচিত। স্ক্র্যাচ থেকে পুরো নোড তৈরি করার দরকার নেই। যাইহোক, সর্বাধিক সাধারণ ব্যবহারের ক্ষেত্রে ডিওএমে অ্যাক্সেস হ্রাস করা সর্বোচ্চ অগ্রাধিকার।

— vsync

@vsync "আপনি" শব্দটি একটি বিমূর্ত অর্থে ব্যবহৃত হয়েছে, এটি আপনাকে পৃথক হিসাবে বোঝায় না (যা আমি নিশ্চিত যে আপনি, ভার্চেঞ্চ, জানেন) তবে এই উত্তরগুলির অনুমানমূলক ভবিষ্যতের গ্রাহক হিসাবে to আবার, দুটি উত্তর ফাংশনে অভিন্ন। আপনার যুক্তি ত্রুটিযুক্ত হয়ে থাকলেও (আপনি কীভাবে চান তা ভোটাধিকারপ্রাপ্ত) (বেঞ্চমার্কগুলি পরীক্ষা করুন), তবে নিজের কমনীয় মন্তব্যগুলি নিজের কাছে রাখুন।

— ক্রিস বেকার

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

আপনি কেবলমাত্র একটি উপাদান (শেষে "এস" সহ সেটেটরিবিটস) যুক্ত করতে পারেন "এলিমেন্ট" প্রোটোটাইপের মতো:

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);