উত্তর:
ক্লাস যুক্ত করতে এলিমেন্ট.classList.add ব্যবহার করুন:
element.classList.add("my-class");এবং এলিমেন্ট.ক্লাসলিস্ট.একটি শ্রেণি অপসারণ করতে সরান:
element.classList.remove("my-class");classNameউপাদানটির সম্পত্তিতে আপনার নতুন শ্রেণীর নাম যুক্ত করুন । প্রথমে idউপাদানটিতে একটি রাখুন যাতে আপনি সহজেই একটি রেফারেন্স পেতে পারেন।
<div id="div1" class="someclass">
<img ... id="image1" name="image1" />
</div>তারপর
var d = document.getElementById("div1");
d.className += " otherclass";আগে স্থান নোট করুন otherclass। স্থানটি অন্তর্ভুক্ত করা গুরুত্বপূর্ণ, অন্যথায় এটি শ্রেণিকালিকার তালিকায় আসার আগে উপস্থিত শ্রেণিগুলির সাথে আপস করে।
এমডিএন এও এলিমেন্ট.ক্লাসনাম দেখুন ।
কোনও কাঠামো ছাড়াই এটি করার সহজ উপায় হ'ল এলিমেন্ট.ক্লাসলিস্ট.এডিডি পদ্ধতিটি ব্যবহার করা ।
var element = document.getElementById("div1");
element.classList.add("otherclass");সম্পাদনা করুন: এবং আপনি যদি কোনও উপাদান থেকে শ্রেণি অপসারণ করতে চান -
element.classList.remove("otherclass");আমি কোনও খালি জায়গা এবং নকল এন্ট্রি নিজেকে পরিচালনা করে না document.classNameযাওয়াকে পছন্দ করি (যা পদ্ধতির ব্যবহার করার সময় প্রয়োজনীয়)। ব্রাউজারের কিছু সীমাবদ্ধতা রয়েছে তবে পলিফিল ব্যবহার করে আপনি তাদের চারপাশে কাজ করতে পারেন ।
আপনার টার্গেট এলিমেন্টটি "ডি" সন্ধান করুন তবে আপনি চান এবং তারপরে:
d.className += ' additionalClass'; //note the spaceআপনি এটিকে প্রাক-অস্তিত্ব পরীক্ষা করতে এবং স্থানের প্রয়োজনীয়তা ইত্যাদি যাচাই করার জন্য চালক পদ্ধতিতে গুটিয়ে রাখতে পারেন ..
splitসাদা স্থানের শ্রেণিকাম , অপসারণকারী অ্যারে থেকে আপনি যা চান না তা মুছে ফেলুন, তারপরে joinআবার অ্যারে ... বা ব্যবহার করুন element.classList.remove।
সামঞ্জস্যপূর্ণ ক্রস
নিম্নলিখিত উদাহরণে আমরা যোগ classnameকরতে <body>উপাদান। এটি আইই -8 সামঞ্জস্যপূর্ণ।
var a = document.body;
a.classList ? a.classList.add('classname') : a.className += ' classname';এটি নিম্নলিখিতগুলির জন্য শর্টহ্যান্ড ..
var a = document.body;
if (a.classList) {
a.classList.add('wait');
} else {
a.className += ' wait';
}কর্মক্ষমতা
যদি ক্রস-সামঞ্জস্যের উপর পারফরম্যান্সের সাথে আপনার আরও উদ্বেগ থাকে তবে আপনি এটি নীচে সংক্ষিপ্ত করতে পারেন যা 4% দ্রুত।
var z = document.body;
document.body.classList.add('wait');সুবিধা
বিকল্পভাবে আপনি jQuery ব্যবহার করতে পারেন তবে ফলাফলের পারফরম্যান্স উল্লেখযোগ্যভাবে ধীর। Jscreen অনুযায়ী 94% ধীর
$('body').addClass('wait');কর্মক্ষমতা
পারফরম্যান্সের সাথে যদি আপনার সংশ্লিষ্ট থাকেন তবে কোনও ক্লাস অপসারণের জন্য বেছে বেছে jQuery ব্যবহার করা সেরা পদ্ধতি
var a = document.body, c = ' classname';
$(a).removeClass(c);JQuery ছাড়া এটি 32% ধীর
var a = document.body, c = ' classname';
a.className = a.className.replace( c, '' );
a.className = a.className + c;Element("document.body").ClassNames.add("classname")
Element("document.body").ClassNames.remove("classname")
Element("document.body").ClassNames.set("classname")YAHOO.util.Dom.hasClass(document.body,"classname")
YAHOO.util.Dom.addClass(document.body,"classname")
YAHOO.util.Dom.removeClass(document.body,"classname")a.classList ? ...) সাধারণ ( if (a.classList) { ....) এর তুলনায় কোনও গতির পার্থক্য থাকবে ?
classList.remove()। আপনি এটি ব্যবহার করেননি কেন? এটা অনেক দ্রুত jQuery এর চেয়ে এর jsperf.com/remove-class-vanilla-vs-jquery
classListক্লাস অপসারণ বাদে সব কিছুর জন্য ব্যবহার করেছিলেন, এই কারণেই আমি এটি জিজ্ঞাসা করছি।
খাঁটি জাভাস্ক্রিপ্ট ব্যবহার করে উপাদানকে ক্লাসে যুক্ত করার জন্য আরেকটি পদ্ধতি
ক্লাস যুক্ত করার জন্য:
document.getElementById("div1").classList.add("classToBeAdded");ক্লাস অপসারণের জন্য:
document.getElementById("div1").classList.remove("classToBeRemoved");আমি যে কাজটি করছি তা কোনও লাইব্রেরি ব্যবহার করে ওয়ারেন্ট না দিলে আমি এই দুটি ফাংশন ব্যবহার করি:
function addClass( classname, element ) {
var cn = element.className;
//test for existance
if( cn.indexOf( classname ) != -1 ) {
return;
}
//add a space if the element already has class
if( cn != '' ) {
classname = ' '+classname;
}
element.className = cn+classname;
}
function removeClass( classname, element ) {
var cn = element.className;
var rxp = new RegExp( "\\s?\\b"+classname+"\\b", "g" );
cn = cn.replace( rxp, '' );
element.className = cn;
}if( cn.indexOf( classname ) != -1 ) { return; } সাবধান থাকুন যে আপনি এখানে "বিটিএন" ক্লাসটি ইতিমধ্যে এখানে উপস্থিত থাকলে "বিটিএন" ক্লাস যুক্ত করেন, এটি ব্যর্থ হয়।
element.className.split(" ");সমস্যাটি প্রতিরোধ করতে ব্যবহার করা উচিত @ অ্যালেক্সানড্রেডিয়েলোট এখানে রিপোর্ট করেছেন।
ধরে নিই যে আপনি কেবল এই এক শ্রেণি যুক্ত করার চেয়ে আরও বেশি কিছু করছেন (যেমন, আপনার কাছে অ্যাসিনক্রোনাস অনুরোধ রয়েছে এবং এটির পাশাপাশি চলতেও ), আমি প্রোটোটাইপ বা জিকুয়ের মতো লাইব্রেরিটির পরামর্শ দেব ।
এটি আপনাকে যা করতে হবে তা খুব সহজ করে দেবে (এটি সহ) খুব সাধারণ।
সুতরাং আসুন আমরা এখনই আপনার পৃষ্ঠায় jQuery পেয়েছি বলে মনে করি, আপনি কোনও উপাদানটিতে শ্রেণীর নাম যুক্ত করতে এই জাতীয় কোড ব্যবহার করতে পারেন (এই ক্ষেত্রে লোডে):
$(document).ready( function() {
$('#div1').addClass( 'some_other_class' );
} );পরীক্ষা করে দেখুন jQuery এর এপিআই ব্রাউজার অন্যান্য উপাদান জন্য।
উপাদান থেকে কোনও শ্রেণি যোগ / অপসারণ করতে আপনি ক্লাসলিস্ট.এডডি বা শ্রেণি তালিকাভুক্ত পদ্ধতিটি ব্যবহার করতে পারেন।
var nameElem = document.getElementById("name")
nameElem.classList.add("anyclss")উপরের কোডটি নামলেমে একটি শ্রেণি "যে কোনও ক্লাস" যুক্ত করবে (এবং প্রতিস্থাপন করবে না)। একইভাবে আপনি ক্লাস অপসারণের জন্য ClassList.remove () পদ্ধতিটি ব্যবহার করতে পারেন।
nameElem.classList.remove("anyclss")বিদ্যমান মানগুলি অপসারণ / প্রভাবিত না করে কোনও উপাদানকে ক্লাস যুক্ত করতে একটি স্থান এবং নতুন শ্রেণিকাম যুক্ত করুন, এর মতো:
document.getElementById("MyElement").className += " MyClass";এক বা একাধিক নতুন ক্লাসের সাথে বিদ্যমান বিদ্যমান ক্লাসগুলিকে প্রতিস্থাপন করতে শ্রেণি নাম বৈশিষ্ট্য নির্ধারণ করুন:
document.getElementById("MyElement").className = "MyClass";(আপনি একাধিক ক্লাস প্রয়োগ করতে একটি স্পেস-সীমাবদ্ধ তালিকা ব্যবহার করতে পারেন))
আপনি যদি jQuery ব্যবহার করতে না চান এবং পুরানো ব্রাউজারগুলিকে সমর্থন করতে চান:
function addClass(elem, clazz) {
if (!elemHasClass(elem, clazz)) {
elem.className += " " + clazz;
}
}
function elemHasClass(elem, clazz) {
return new RegExp("( |^)" + clazz + "( |$)").test(elem.className);
}আমি জানি যে আইআই 9 সরকারীভাবে বন্ধ হয়ে গেছে এবং আমরা element.classListউপরে বর্ণিত যতগুলি দ্বারা এটি অর্জন করতে পারি তবে আমি কেবল এটি classListশিখতে পারলাম উপরের উত্তরগুলির সাহায্য ছাড়াই এটি কীভাবে কাজ করে তা শিখতে চেষ্টা করেছি।
নীচে কোড উপরে অনেক উত্তর প্রসারিত করে এবং সদৃশ ক্লাস যুক্ত এড়িয়ে তাদের উন্নত করে।
function addClass(element,className){
var classArray = className.split(' ');
classArray.forEach(function (className) {
if(!hasClass(element,className)){
element.className += " "+className;
}
});
}
//this will add 5 only once
addClass(document.querySelector('#getbyid'),'3 4 5 5 5');আমিও মনে করি যে এসি 5-র মতো এলিমেন্ট.প্রোটোটাইপ.গ্লাসলিস্টটি ব্যবহার করা সবচেয়ে দ্রুততম উপায়: document.querySelector(".my.super-class").classList.add('new-class')
তবে ie8 তে এলিমেন্ট.প্রোটোটাইপ.ক্লাসলিস্টের মতো কোনও জিনিস নেই, যাইহোক আপনি এই স্নিপেটের সাথে এটি পলিফিল করতে পারবেন (এটি সম্পাদনা করতে এবং উন্নত করতে নিখরচায় পড়েছেন) ):
if(Element.prototype.classList === void 0){
function DOMTokenList(classes, self){
typeof classes == "string" && (classes = classes.split(' '))
while(this.length){
Array.prototype.pop.apply(this);
}
Array.prototype.push.apply(this, classes);
this.__self__ = this.__self__ || self
}
DOMTokenList.prototype.item = function (index){
return this[index];
}
DOMTokenList.prototype.contains = function (myClass){
for(var i = this.length - 1; i >= 0 ; i--){
if(this[i] === myClass){
return true;
}
}
return false
}
DOMTokenList.prototype.add = function (newClass){
if(this.contains(newClass)){
return;
}
this.__self__.className += (this.__self__.className?" ":"")+newClass;
DOMTokenList.call(this, this.__self__.className)
}
DOMTokenList.prototype.remove = function (oldClass){
if(!this.contains(newClass)){
return;
}
this[this.indexOf(oldClass)] = undefined
this.__self__.className = this.join(' ').replace(/ +/, ' ')
DOMTokenList.call(this, this.__self__.className)
}
DOMTokenList.prototype.toggle = function (aClass){
this[this.contains(aClass)? 'remove' : 'add'](aClass)
return this.contains(aClass);
}
DOMTokenList.prototype.replace = function (oldClass, newClass){
this.contains(oldClass) && this.remove(oldClass) && this.add(newClass)
}
Object.defineProperty(Element.prototype, 'classList', {
get: function() {
return new DOMTokenList( this.className, this );
},
enumerable: false
})
}অন্যরা কী বলেছে তা কেবল বিশদভাবে জানাতে, একাধিক সিএসএস ক্লাস একক স্ট্রিংয়ে একত্রিত হয়, স্পেস দ্বারা ডিলিট করে। সুতরাং, আপনি যদি এটি হার্ড-কোড করতে চান, এটি কেবল এটির মতো দেখায়:
<div class="someClass otherClass yetAnotherClass">
<img ... id="image1" name="image1" />
</div>সেখান থেকে আপনি সহজেই নতুন ক্লাস যুক্ত করার জন্য প্রয়োজনীয় জাভাস্ক্রিপ্টটি অর্জন করতে পারেন ... কেবলমাত্র নতুন শ্রেণীর পরে একটি স্থান যুক্ত করে এলিমেন্টের শ্রেণীর নাম সম্পত্তিতে। এটি জেনে, আপনি প্রয়োজন পরে উত্থাপিত হওয়া পরে কোনও ক্লাস অপসারণ করতে একটি ফাংশনও লিখতে পারেন।
একটি সহজ উপায়ে উপাদান ক্লাস যুক্ত করতে, অপসারণ বা পরীক্ষা করতে:
var uclass = {
exists: function(elem,className){var p = new RegExp('(^| )'+className+'( |$)');return (elem.className && elem.className.match(p));},
add: function(elem,className){if(uclass.exists(elem,className)){return true;}elem.className += ' '+className;},
remove: function(elem,className){var c = elem.className;var p = new RegExp('(^| )'+className+'( |$)');c = c.replace(p,' ').replace(/ /g,' ');elem.className = c;}
};
var elem = document.getElementById('someElem');
//Add a class, only if not exists yet.
uclass.add(elem,'someClass');
//Remove class
uclass.remove(elem,'someClass');আপনি jQuery এর অনুরূপ আধুনিক পদ্ধতির ব্যবহার করতে পারেন
আপনার যদি কেবল একটি উপাদান পরিবর্তন করতে হয় তবে প্রথমে জেএস ডিওমে খুঁজে পাবেন, আপনি এটি ব্যবহার করতে পারেন:
document.querySelector('.someclass').className += " red";.red {
color: red;
}<div class="someclass">
<p>This method will add class "red" only to first element in DOM</p>
</div>
<div class="someclass">
<p>lorem ipsum</p>
</div>
<div class="someclass">
<p>lorem ipsum</p>
</div>
<div class="someclass">
<p>lorem ipsum</p>
</div>শ্রেণীর নামের আগে একটি স্থান রেখে যাওয়ার বিষয়টি মনে রাখবেন ।
আপনার যদি একাধিক ক্লাস থাকে যেখানে আপনি নতুন ক্লাস যুক্ত করতে চান তবে আপনি এটি এটি ব্যবহার করতে পারেন
document.querySelectorAll('.someclass').forEach(function(element) {
element.className += " red";
});.red {
color: red;
}<div class="someclass">
<p>This method will add class "red" to all elements in DOM that have "someclass" class.</p>
</div>
<div class="someclass">
<p>lorem ipsum</p>
</div>
<div class="someclass">
<p>lorem ipsum</p>
</div>
<div class="someclass">
<p>lorem ipsum</p>
</div>আমি মনে করি খাঁটি জাভাস্ক্রিপ্ট ব্যবহার করা ভাল, যা আমরা ব্রাউজারের DOM এ চালাতে পারি।
এটি ব্যবহারের কার্যকরী উপায় এখানে। আমি ES6 ব্যবহার করেছি তবে নিখরচায় ES5 এবং ফাংশন এক্সপ্রেশন বা ফাংশন সংজ্ঞা ব্যবহার করুন, যা আপনার জাভাস্ক্রিপ্ট স্টাইলগুইডের জন্য উপযুক্ত।
'use strict'
const oldAdd = (element, className) => {
let classes = element.className.split(' ')
if (classes.indexOf(className) < 0) {
classes.push(className)
}
element.className = classes.join(' ')
}
const oldRemove = (element, className) => {
let classes = element.className.split(' ')
const idx = classes.indexOf(className)
if (idx > -1) {
classes.splice(idx, 1)
}
element.className = classes.join(' ')
}
const addClass = (element, className) => {
if (element.classList) {
element.classList.add(className)
} else {
oldAdd(element, className)
}
}
const removeClass = (element, className) => {
if (element.classList) {
element.classList.remove(className)
} else {
oldRemove(element, className)
}
}খাঁটি জেএস সহ নমুনা। প্রথম উদাহরণে আমরা আমাদের উপাদানটির আইডি পাই এবং উদাহরণস্বরূপ 2 টি ক্লাস যুক্ত করি।
document.addEventListener('DOMContentLoaded', function() {
document.getElementsById('tabGroup').className = "anyClass1 anyClass2";
})দ্বিতীয় উদাহরণে আমরা উপাদানটির শ্রেণীর নাম পাই এবং আরও 1 টি যুক্ত করি।
document.addEventListener('DOMContentLoaded', function() {
document.getElementsByClassName('tabGroup')[0].className = "tabGroup ready";
})লোডাশ ব্যবহার এবং classNameস্ট্রিং আপডেট করতে চান তাদের জন্য :
// get element reference
var elem = document.getElementById('myElement');
// add some classes. Eg. 'nav' and 'nav header'
elem.className = _.chain(elem.className).split(/[\s]+/).union(['nav','navHeader']).join(' ').value()
// remove the added classes
elem.className = _.chain(elem.className).split(/[\s]+/).difference(['nav','navHeader']).join(' ').value()প্রথমে ডিভকে একটি আইডি দিন। তারপরে, কল করুন ফাংশন অ্যাপেন্ডক্লাস:
<script language="javascript">
function appendClass(elementId, classToAppend){
var oldClass = document.getElementById(elementId).getAttribute("class");
if (oldClass.indexOf(classToAdd) == -1)
{
document.getElementById(elementId).setAttribute("class", classToAppend);
}
}
</script>indexOfএকটি নিষ্পাপ সমাধান এবং ইতিমধ্যে চিহ্নিত সমস্যা আছে ।
আপনি আপনার উপাদানটি নির্বাচন করতে এবং তারপরে উপাদানগুলির সাথে নতুন ফাংশন এবং প্যারামিটার হিসাবে নতুন শ্রেণিকামটি তৈরি করতে আপনি API ক্যোয়ারী নির্বাচনকারী ব্যবহার করতে পারেন। আধুনিক ব্রাউজারগুলির জন্য ক্লাসলিস্ট ব্যবহার করা, অন্যথায় আই 8 এর জন্য। তারপরে আপনি কোনও ইভেন্টের পরে ফাংশনটি কল করতে পারেন।
//select the dom element
var addClassVar = document.querySelector('.someclass');
//define the addclass function
var addClass = function(el,className){
if (el.classList){
el.classList.add(className);
}
else {
el.className += ' ' + className;
}
};
//call the function
addClass(addClassVar, 'newClass');document.getElementById('some_id').className+=' someclassname'বা:
document.getElementById('come_id').classList.add('someclassname')দ্বিতীয় পদ্ধতির কাজ না হলে প্রথম পদ্ধতির ক্লাস যুক্ত করতে সহায়তা করেছিল।
সামনে একটি জায়গা রাখতে ভুলবেন না' someclassname'প্রথম পদ্ধতির ।
অপসারণের জন্য আপনি ব্যবহার করতে পারেন:
document.getElementById('some_id').classList.remove('someclassname')এই জেএস কোডটি আমার পক্ষে কাজ করে
শ্রেণীর নাম প্রতিস্থাপন সরবরাহ করে
var DDCdiv = hEle.getElementBy.....
var cssCNs = DDCdiv.getAttribute('class');
var Ta = cssCNs.split(' '); //split into an array
for (var i=0; i< Ta.length;i++)
{
if (Ta[i] == 'visible'){
Ta[i] = 'hidden';
break;// quit for loop
}
else if (Ta[i] == 'hidden'){
Ta[i] = 'visible';
break;// quit for loop
}
}
DDCdiv.setAttribute('class',Ta.join(' ') ); // Join array with space and set class nameশুধু ব্যবহার যোগ করুন
var cssCNs = DDCdiv.getAttribute('class');
var Ta = cssCNs.split(' '); //split into an array
Ta.push('New class name');
// Ta.push('Another class name');//etc...
DDCdiv.setAttribute('class',Ta.join(' ') ); // Join array with space and set class nameব্যবহার অপসারণ করতে
var cssCNs = DDCdiv.getAttribute('class');
var Ta = cssCNs.split(' '); //split into an array
for (var i=0; i< Ta.length;i++)
{
if (Ta[i] == 'visible'){
Ta.splice( i, 1 );
break;// quit for loop
}
}
DDCdiv.setAttribute('class',Ta.join(' ') ); // Join array with space and set class nameআশা করি এটি সংক্ষেপে সহায়ক
element.classList.add("my-class")পরিবর্তে ব্যবহার করুন।