ক্লাস পরিবর্তন করার জন্য আধুনিক এইচটিএমএল 5 কৌশল
আধুনিক ব্রাউজারগুলি ক্লাসলিস্ট যুক্ত করেছে যা গ্রন্থাগারের প্রয়োজন ছাড়াই ক্লাস পরিচালনা করতে আরও সহজ করার জন্য পদ্ধতি সরবরাহ করে:
document.getElementById("MyElement").classList.add('MyClass');
document.getElementById("MyElement").classList.remove('MyClass');
if ( document.getElementById("MyElement").classList.contains('MyClass') )
document.getElementById("MyElement").classList.toggle('MyClass');
দুর্ভাগ্যক্রমে, v10 এর পূর্বে এগুলি ইন্টারনেট এক্সপ্লোরারে কাজ করে না, যদিও এই পৃষ্ঠা থেকে উপলব্ধ IE8 এবং IE9 এ এর জন্য সমর্থন যোগ করার শিম রয়েছে । এটি যদিও আরও এবং বেশি সমর্থিত হচ্ছে ।
সাধারণ ক্রস ব্রাউজার সমাধান
কোনও উপাদান নির্বাচন করার জন্য স্ট্যান্ডার্ড জাভাস্ক্রিপ্টের পদ্ধতিটি ব্যবহার করা হচ্ছে document.getElementById("Id"), যা নিম্নলিখিত উদাহরণগুলি ব্যবহার করে - আপনি অবশ্যই অন্যান্য উপায়ে উপাদানগুলি পেতে পারেন, এবং সঠিক পরিস্থিতিতে কেবল তার thisপরিবর্তে ব্যবহার করতে পারেন - তবে, এই সম্পর্কে বিস্তারিতভাবে যাওয়া সুযোগের বাইরে নয় is উত্তর।
কোনও উপাদানটির জন্য সমস্ত শ্রেণি পরিবর্তন করতে:
এক বা একাধিক নতুন ক্লাসের সাথে বিদ্যমান বিদ্যমান ক্লাসগুলিকে প্রতিস্থাপন করতে শ্রেণি নাম বৈশিষ্ট্য নির্ধারণ করুন:
document.getElementById("MyElement").className = "MyClass";
(আপনি একাধিক ক্লাস প্রয়োগ করতে একটি স্পেস-সীমাবদ্ধ তালিকা ব্যবহার করতে পারেন))
একটি উপাদান একটি অতিরিক্ত বর্গ যোগ করতে:
বিদ্যমান মানগুলি অপসারণ / প্রভাবিত না করে কোনও উপাদানকে ক্লাস যুক্ত করতে একটি স্থান এবং নতুন শ্রেণিকাম যুক্ত করুন, এর মতো:
document.getElementById("MyElement").className += " MyClass";
কোনও উপাদান থেকে কোনও শ্রেণি অপসারণ করতে:
একটি উপাদানগুলিতে একটি ক্লাস অপসারণ করতে, অন্যান্য সম্ভাব্য ক্লাসগুলিকে প্রভাবিত না করে, একটি সরল রেজেক্স প্রতিস্থাপনের প্রয়োজন:
document.getElementById("MyElement").className =
document.getElementById("MyElement").className.replace
( /(?:^|\s)MyClass(?!\S)/g , '' )
/* Code wrapped for readability - above is all one statement */
এই রেজেক্সের একটি ব্যাখ্যা নিম্নরূপ:
(?:^|\s) # Match the start of the string, or any single whitespace character
MyClass # The literal text for the classname to remove
(?!\S) # Negative lookahead to verify the above is the whole classname
# Ensures there is no non-space character following
# (i.e. must be end of string or a space)
gপতাকা বলে প্রয়োজনীয় ক্ষেত্রে বর্গ নাম যোগ করা হয়েছে একাধিক বার যেমন পুনরাবৃত্তি করার প্রতিস্থাপন করুন।
কোনও উপাদানটিতে ইতিমধ্যে শ্রেণি প্রয়োগ করা হয়েছে কিনা তা পরীক্ষা করতে:
কোনও শ্রেণি অপসারণের জন্য উপরে ব্যবহৃত একই রেজেক্সটি কোনও নির্দিষ্ট শ্রেণীর উপস্থিত রয়েছে কিনা তা পরীক্ষা হিসাবে ব্যবহার করা যেতে পারে:
if ( document.getElementById("MyElement").className.match(/(?:^|\s)MyClass(?!\S)/) )
অনক্লিক ইভেন্টগুলিতে এই ক্রিয়াগুলি বরাদ্দ করা হচ্ছে:
এইচটিএমএল ইভেন্টের বৈশিষ্ট্যগুলির মধ্যে সরাসরি জাভাস্ক্রিপ্ট লেখা সম্ভব (যেমন onclick="this.className+=' MyClass'") এটি প্রস্তাবিত আচরণ নয়। বিশেষত বৃহত্তর অ্যাপ্লিকেশনগুলিতে, জাভাস্ক্রিপ্ট ইন্টারঅ্যাকশন যুক্তি থেকে এইচটিএমএল মার্কআপকে আলাদা করে আরও রক্ষণাবেক্ষণযোগ্য কোড অর্জন করা হয়।
এটি অর্জনের প্রথম পদক্ষেপটি একটি ফাংশন তৈরি করা এবং ফাংশনটিকে অনক্লিক বৈশিষ্ট্যে কল করা, উদাহরণস্বরূপ:
<script type="text/javascript">
function changeClass(){
// Code examples from above
}
</script>
...
<button onclick="changeClass()">My Button</button>
(স্ক্রিপ্ট ট্যাগগুলিতে এই কোডটি থাকা দরকার নেই, এটি কেবল উদাহরণস্বরূপ বর্ধনের জন্য, এবং একটি পৃথক ফাইলে জাভাস্ক্রিপ্ট সহ আরও উপযুক্ত হতে পারে))
দ্বিতীয় পদক্ষেপটি হ'ল অনক্লিক ইভেন্টটি HTML থেকে বাইরে এবং জাভাস্ক্রিপ্টে স্থানান্তর করা, উদাহরণস্বরূপ addEventListener ব্যবহার করে
<script type="text/javascript">
function changeClass(){
// Code examples from above
}
window.onload = function(){
document.getElementById("MyElement").addEventListener( 'click', changeClass);
}
</script>
...
<button id="MyElement">My Button</button>
(নোট করুন যে উইন্ডো.অনলোড অংশটি প্রয়োজনীয় যাতে HTML ফোল্ডিং শেষ হওয়ার পরে সেই ফাংশনের বিষয়বস্তু কার্যকর করা যায় - এটি ছাড়া জাভাস্ক্রিপ্ট কোডটি কল করার সময় মাইলেমেন্ট উপস্থিত থাকতে পারে না, সুতরাং সেই লাইনটি ব্যর্থ হয়))
জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক এবং গ্রন্থাগারগুলি
উপরের কোডটি সমস্ত স্ট্যান্ডার্ড জাভাস্ক্রিপ্টে রয়েছে, তবে সাধারণ কাজগুলি সহজ করার জন্য ফ্রেমওয়ার্ক বা লাইব্রেরি ব্যবহার করা যেমন সাধারণ অভ্যাস, তেমনি স্থির বাগ এবং প্রান্তের ক্ষেত্রেও সুবিধা পাবেন যা আপনার কোড লেখার সময় আপনি ভাবেন না।
যদিও কিছু লোকেরা কেবল কোনও শ্রেণি পরিবর্তনের জন্য 50 ডলার কেবি ফ্রেমওয়ার্ক যুক্ত করার জন্য এটি অতিমাত্রায় বিবেচনা করে থাকে, আপনি যদি জাভাস্ক্রিপ্টের যে কোনও পরিমাণ কাজ করছেন বা এমন কিছু যা অস্বাভাবিক ক্রস-ব্রাউজারের আচরণে থাকতে পারে, তা বিবেচনা করা ভাল।
(খুব মোটামুটিভাবে, একটি গ্রন্থাগার একটি নির্দিষ্ট কাজের জন্য নকশাকৃত সরঞ্জামগুলির সেট যা একটি কাঠামোর মধ্যে সাধারণত একাধিক লাইব্রেরি থাকে এবং পুরোপুরি দায়িত্ব পালন করে))
উপরের উদাহরণগুলি নীচে jQuery ব্যবহার করে পুনরুত্পাদন করা হয়েছে , সম্ভবত সর্বাধিক ব্যবহৃত জাভাস্ক্রিপ্ট লাইব্রেরি (যদিও তদন্ত করার মতো আরও কিছু রয়েছে)।
(নোট করুন $এখানে jQuery অবজেক্ট।)
JQuery সহ ক্লাস পরিবর্তন করা:
$('#MyElement').addClass('MyClass');
$('#MyElement').removeClass('MyClass');
if ( $('#MyElement').hasClass('MyClass') )
তদ্ব্যতীত, jQuery কোনও ক্লাস যুক্ত করার জন্য শর্টকাট সরবরাহ করে না যদি এটি প্রয়োগ না হয়, বা এমন কোনও ক্লাস অপসারণ করে যা:
$('#MyElement').toggleClass('MyClass');
JQuery সহ একটি ক্লিক ইভেন্টে একটি ফাংশন বরাদ্দ করা:
$('#MyElement').click(changeClass);
বা, একটি আইডি প্রয়োজন ছাড়াই:
$(':button:contains(My Button)').click(changeClass);