কীভাবে জাভাস্ক্রিপ্ট ব্যবহার করে কোনও এইচটিএমএল উপাদানটিতে কোনও বৈশিষ্ট্য যুক্ত / আপডেট করা যায়?


128

আমি এমন কোনও উপায় সন্ধান করার চেষ্টা করছি যা জাভাস্ক্রিপ্ট ব্যবহার করে অ্যাট্রিবিউট যুক্ত / আপডেট করবে। আমি জানি আমি এটি setAttribute()ফাংশন দিয়ে করতে পারি তবে এটি আইই তে কাজ করে না।

উত্তর:


163

আপনি আইই সহ অনেকগুলি বিভিন্ন ব্রাউজারে গুণাবলীর আচরণ সম্পর্কে এখানে পড়তে পারেন ।

element.setAttribute()এমনকি কৌতূহল আইই-তে করা উচিত। তুমি কি চেষ্টা করেছ? যদি এটি কাজ না করে, তবে সম্ভবত element.attributeName = 'value'কাজ করতে পারে।


5
এইটা কাজ করে. এটি অস্তিত্ব তৈরি করে যদি এটি বিদ্যমান না থাকে এবং এটি উপস্থিত থাকলে আপডেট করে। এটি কোথাও ডকুমেন্টেড যেখানে এটি কাজ করে?
dev.e.loper

@ dev.e.loper DOM স্পিক শুরু করার জন্য একটি ভাল জায়গা: w3.org/TR/2004/REC-DOM- লাইভ -3- কোর-20040407/…
ভ্যালেন্টিনাস

1
আমি যখন নিম্নলিখিতগুলি করি: document.getElementById("nav").setAttribute("class", "active");এটি ক্রোম জেএস কনসোলে কাজ করে, তবে প্রকৃত পৃষ্ঠায় এটি কার্যকর হয় না ... কোনও ধারণা? যাইহোক, আসল পৃষ্ঠাতে আমি সুযোগটি .jsশেষ হওয়ার আগে ফাইলটি অন্তর্ভুক্ত করি body
পরিচিতাসিল্যা

36

আপনি যদি পুরোপুরি সামঞ্জস্যপূর্ণ হতে চান তবে যা সহজ বলে মনে হচ্ছে তা আসলে জটিল।

var e = document.createElement('div');

ধরা যাক আপনার যুক্ত করতে 'Div1' এর একটি আইডি রয়েছে।

e['id'] = 'div1';
e.id = 'div1';
e.attributes['id'] = 'div1';
e.createAttribute('id','div1')
এগুলি আইই 5.5 এ শেষ ব্যতীত সমস্ত কাজ করবে (যা এই মুহুর্তে প্রাচীন ইতিহাস তবে আপডেটের সাথে এক্সপির ডিফল্টও রয়েছে)।

তবে অবশ্যই জরুরী অবস্থা রয়েছে। আই ই কাজ নাও 8 পূর্বে হবে: e.attributes['style'] ত্রুটি করবে না কিন্তু আসলে বর্গ সেট না হবে, এটি classname হতে হবে: e['class']
তবে, আপনি যদি বৈশিষ্ট্যগুলি ব্যবহার করছেন তবে এই কাজ করবে:e.attributes['class']

সংক্ষেপে, বৈশিষ্ট্যগুলিকে আক্ষরিক এবং বস্তু-ভিত্তিক হিসাবে ভাবেন।

আক্ষরিক অর্থে, আপনি কেবল এটি x = 'y' কে থুথু ফেলুন এবং এটি সম্পর্কে ভাবেন না। এটি নির্ধারিত বৈশিষ্ট্য, সেটআট্রিবিউট, ক্রিয়েট অ্যাট্রিবিউট (আই এর স্টাইল ব্যতিক্রম ব্যতীত)। কিন্তু কারণ এটি সত্যই বস্তুগুলি বিভ্রান্ত হতে পারে।

যেহেতু আপনি jQuery অভ্যন্তরীণ এইচটিএমএল opালের পরিবর্তে সঠিকভাবে একটি ডিওএম উপাদান তৈরি করার সমস্যায় পড়ছেন, তাই আমি এটির মতো আচরণ করব এবং e.className = 'fooClass' এবং e.id = 'fooID' দিয়ে আটকে থাকব। এটি একটি নকশার অগ্রাধিকার, তবে এই ক্ষেত্রে চিকিত্সা করার চেষ্টা করা যেমন কোনও বস্তু আপনার বিপরীতে কাজ করে তেমন অন্য কিছু।

এটি অন্যান্য পদ্ধতিগুলির মতো আপনার উপর কখনই পিছিয়ে যাবে না, কেবল শ্রেণি নামকরণ এবং শৈলী একটি বস্তু হওয়ায় সচেতন হতে হবে সুতরাং এটি স্টাইল wউত্তর নয় স্টাইল = "প্রস্থ: 50px"। এছাড়াও ট্যাগনাম মনে রাখবেন তবে এটি ইতিমধ্যে ক্রিয়েলেমেন্ট দ্বারা সেট করা আছে যাতে আপনার এটি নিয়ে চিন্তা করার দরকার নেই।

এটি আমার চেয়ে দীর্ঘ ছিল, তবে জেএসে সিএসএসের হেরফেরটি জটিল কৌশল।


5
উইন্ডোজ এক্সপি 5.5 নয়, আই 6 নিয়ে বেরিয়েছে। এটা ভয়ানক হবে।
মিগল

এই সাথে কাজ করে id, মত অন্য কিছু নয়data-toggle
stallingOne

30

বাধ্যতামূলক jQuery সমাধানtitleবৈশিষ্ট্যটি সন্ধান করে এবং সেট করে foo। নোট করুন এটি একটি একক উপাদান নির্বাচন করে যেহেতু আমি এটি আইডি দিয়ে করছি, তবে আপনি নির্বাচক পরিবর্তন করে খুব সহজেই সংগ্রহটিতে একই বৈশিষ্ট্যটি সেট করতে পারেন।

$('#element').attr( 'title', 'foo' );

3
JQuery সমাধানের জন্য +1। আমার ক্ষেত্রে, আমি আমার কাজের প্রয়োজনীয়তার কারণে jQuery এড়াতে এবং খাঁটি জাভাস্ক্রিপ্টে এটি উত্পাদন করার চেষ্টা করছিলাম। আমি উভয় উত্তর বিদ্যমান খুশি। ধন্যবাদ।
নিউক্লিয়ারপিয়ন

7

বৈশিষ্ট্যটি দিয়ে আপনি কী করতে চান? এটি কি এইচটিএমএল বৈশিষ্ট্য বা নিজের কিছু?

বেশিরভাগ সময় আপনি এটিকে কেবল সম্পত্তি হিসাবে সম্বোধন করতে পারেন: কোনও উপাদানকে একটি শিরোনাম সেট করতে চান? element.title = "foo"এটা করবো.

আপনার নিজস্ব কাস্টম জেএস বৈশিষ্ট্যগুলির জন্য ডমটি প্রাকৃতিকভাবেই এক্সটেনসিবল (ওরফে এক্সপেন্ডো = ট্রু), এর সহজ উত্সবটি হ'ল আপনি তা করতে পারেন element.myCustomFlag = fooএবং পরবর্তীকালে ইস্যু ছাড়াই এটি পড়তে পারেন।

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.