javascript অবজ জাভাস্ক্রিপ্ট সঙ্গে একটি উপাদান এর ক্লাস পরিবর্তন করুন




বুটস্ট্রাপ টিউটোরিয়াল (20)

জাভাস্ক্রিপ্ট ব্যবহার করে an onClick ইভেন্টের প্রতিক্রিয়াতে আমি কীভাবে একটি HTML উপাদান শ্রেণীতে পরিবর্তন করতে পারি?


বিশুদ্ধ জাভাস্ক্রিপ্ট কোড ব্যবহার করে:

function hasClass(ele, cls) {
    return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}

function addClass(ele, cls) {
    if (!this.hasClass(ele, cls)) ele.className += " " + cls;
}

function removeClass(ele, cls) {
    if (hasClass(ele, cls)) {
        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
        ele.className = ele.className.replace(reg, ' ');
    }
}

function replaceClass(ele, oldClass, newClass){
    if(hasClass(ele, oldClass)){
        removeClass(ele, oldClass);
        addClass(ele, newClass);
    }
    return;
}

function toggleClass(ele, cls1, cls2){
    if(hasClass(ele, cls1)){
        replaceClass(ele, cls1, cls2);
    }else if(hasClass(ele, cls2)){
        replaceClass(ele, cls2, cls1);
    }else{
        addClass(ele, cls1);
    }
}

বাহ, বিস্মিত এখানে অনেক overkill উত্তর আছে ...

<div class="firstClass" onclick="this.className='secondClass'">

classList ডম API:

শ্রেণী যোগ এবং অপসারণ করার একটি খুব সুবিধাজনক পদ্ধতি classList ডম API হয়। এই API আমাদের জাভাস্ক্রিপ্ট ব্যবহার করে তালিকাটি সংশোধন করার জন্য একটি নির্দিষ্ট DOM উপাদানের সমস্ত ক্লাস নির্বাচন করতে দেয়। উদাহরণ স্বরূপ:

const el = document.getElementById("main");
console.log(el.classList);
<div class="content wrapper animated" id="main"></div>

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

উদাহরণ:

const el = document.getElementById('container');


function addClass () {
   el.classList.add('newclass');
}


function replaceClass () {
     el.classList.replace('foo', 'newFoo');
}


function removeClass () {
       el.classList.remove('bar');
}
button{
  margin: 20px;
}

.foo{
  color: red;
}

.newFoo {
  color: blue;
}

.bar{
  background-color:powderblue;
}

.newclass{
  border: 2px solid green;
}
<div class="foo bar" id="container">
  "Sed ut perspiciatis unde omnis 
  iste natus error sit voluptatem accusantium doloremque laudantium, 
  totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et 
  quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam 
  voluptatem quia voluptas 
 </div>
  
<button onclick="addClass()">AddClass</button>
  
<button onclick="replaceClass()">ReplaceClass</button>
  
<button onclick="removeClass()">removeClass</button>
  


এখানে একটি টগল রয়েছে একটি উপাদানতে একটি ক্লাসের টগল / যোগ / অপসারণ করতে:

// If newState is provided add/remove theClass accordingly, otherwise toggle theClass
function toggleClass(elem, theClass, newState) {
    var matchRegExp = new RegExp('(?:^|\\s)' + theClass + '(?!\\S)', 'g');
    var add=(arguments.length>2 ? newState : (elem.className.match(matchRegExp) == null));

    elem.className=elem.className.replace(matchRegExp, ''); // clear all
    if (add) elem.className += ' ' + theClass;
}

jsfiddle

গতিশীলভাবে একটি নতুন বর্গ তৈরি করার জন্য here আমার উত্তর দেখুন


কাজ জাভাস্ক্রিপ্ট কোড:

<div id="div_add" class="div_add">Add class from Javascript</div>
<div id="div_replace" class="div_replace">Replace class from Javascript</div>
<div id="div_remove" class="div_remove">Remove class from Javascript</div>
<button onClick="div_add_class();">Add class from Javascript</button>
<button onClick="div_replace_class();">Replace class from Javascript</button>
<button onClick="div_remove_class();">Remove class from Javascript</button>
<script type="text/javascript">
    function div_add_class()
    {
        document.getElementById("div_add").className += " div_added";
    }
    function div_replace_class()
    {
        document.getElementById("div_replace").className = "div_replaced";
    }
    function div_remove_class()
    {
        document.getElementById("div_remove").className = "";
    }
</script>

আপনি এই লিঙ্ক থেকে একটি কাজ কোড ডাউনলোড করতে পারেন।


JQuery এর মতো লাইব্রেরির সাথে এটি সহজতর:

<input type="button" onClick="javascript:test_byid();" value="id='second'" />

<script>
function test_byid()
{
    $("#second").toggleClass("highlight");
}
</script>

লাইন

document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace(/\bMyClass\b/','')

হতে হবে:

document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace('/\bMyClass\b/','');

এখানে যে সহজ jQuery কোড।

$(".class1").click(function(argument) {
    $(".parentclass").removeClass("classtoremove");
    setTimeout(function (argument) {
        $(".parentclass").addClass("classtoadd");
    }, 100);
});

এখানে,

  • ক্লাস 1 একটি ইভেন্টের জন্য শ্রোতা।
  • পিতা-মাতা ক্লাস সেই শ্রেণী যা আপনাকে পরিবর্তন করতে চান এমন ক্লাসটিকে হোস্ট করে
  • Classtoremove আপনি পুরানো ক্লাস হয়।
  • যোগ করার ক্লাসটি আপনি যোগ করতে চান এমন নতুন শ্রেণী।
  • 100 সময়সীমার বিলম্ব যা ক্লাস পরিবর্তিত হয়।

গুড লাক।


JQuery ব্যবহার না করে আমার পুরানো প্রকল্পগুলির মধ্যে একটিতে, আমি উপাদানটি শ্রেণিবদ্ধ করে, যোগ, এবং পরীক্ষণের জন্য নিচের ফাংশনগুলি তৈরি করেছি:

function hasClass(ele, cls) {
    return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}
function addClass(ele, cls) {
    if (!hasClass(ele, cls)) ele.className += " " + cls;
}
function removeClass(ele, cls) {
    if (hasClass(ele, cls)) {
        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
        ele.className = ele.className.replace(reg, ' ');
    }
}

সুতরাং, উদাহরণস্বরূপ, আমি যদি কিছু ক্লাস যুক্ত করতে চাই তবে বোতামটি আমি ব্যবহার করতে পারি:

<script type="text/javascript">
    function changeClass(btn, cls) {
        if(!hasClass(btn, cls)) {
            addClass(btn, cls);
        }
    }
</script>
...
<button onclick="changeClass(this, "someClass")">My Button</button>

নিশ্চিতভাবে এখন এটি jQuery ব্যবহার করা ভাল হবে।


আমি jQuery ব্যবহার করব এবং এরকম কিছু লিখব:

jQuery(function($) {
    $("#some-element").click(function() {
        $(this).toggleClass("clicked");
    });
});

আইডি একটি উপাদান কিছু উপাদান ক্লিক করা হয় যখন এই কোড বলা একটি ফাংশন যোগ করা হয়। যদি ফাংশনটি ইতিমধ্যে এটির অংশ না থাকে তবে ফাংশন যোগ করে উপাদানটির শ্রেণিবদ্ধ গুণাবলীতে ক্লিক করে এবং যদি এটি থাকে তবে এটি সরান।

হ্যাঁ আপনাকে এই কোডটি ব্যবহার করতে আপনার পৃষ্ঠায় jQuery লাইব্রেরির একটি রেফারেন্স যুক্ত করতে হবে, তবে কমপক্ষে আপনি নিশ্চিত করতে পারেন যে লাইব্রেরির বেশিরভাগ ফাংশনগুলি বেশিরভাগ আধুনিক ব্রাউজারে কাজ করবে এবং এটি আপনাকে সময় প্রয়োগ করার সময় সংরক্ষণ করবে আপনার নিজের কোড একই কাজ।

ধন্যবাদ


আপনি ঠিক করতে পারেন:

document.getElementById('id').classList.add('class');
document.getElementById('id').classList.remove('class');

এবং একটি শ্রেণী টগল করতে (যদি বিদ্যমান থাকে তবে এটি যোগ করুন):

document.getElementById('id').classList.toggle('class');

অন্য জনপ্রিয় ফ্রেমওয়ার্ক থেকে তথ্য যুক্ত করতে, গুগল ক্লোজার্স, তাদের dom/classes ক্লাস দেখুন:

goog.dom.classes.add(element, var_args)

goog.dom.classes.addRemove(element, classesToRemove, classesToAdd)

goog.dom.classes.remove(element, var_args)

উপাদানটি নির্বাচন করার জন্য একটি বিকল্প একটি CSS3 সিলেক্টর সহ goog.dom.query ব্যবহার goog.dom.query :

var myElement = goog.dom.query("#MyElement")[0];

এখানে আমার সংস্করণ, সম্পূর্ণরূপে কাজ করছে:

function addHTMLClass(item, classname) {
    var obj = item
    if (typeof item=="string") {
        obj = document.getElementById(item)
    }
    obj.className += " " + classname
}

function removeHTMLClass(item, classname) {
    var obj = item
    if (typeof item=="string") {
        obj = document.getElementById(item)
    }
    var classes = ""+obj.className
    while (classes.indexOf(classname)>-1) {
        classes = classes.replace (classname, "")
    }
    obj.className = classes
}

ব্যবহার:

<tr onmouseover='addHTMLClass(this,"clsSelected")'
onmouseout='removeHTMLClass(this,"clsSelected")' >

এটি আমার জন্য কাজ করছে:

function setCSS(eleID) {
    var currTabElem = document.getElementById(eleID);

    currTabElem.setAttribute("class", "some_class_name");
    currTabElem.setAttribute("className", "some_class_name");
}

শুধু ভেবেছিলাম আমি এটা নিক্ষেপ করবো:

function inArray(val, ary){
  for(var i=0,l=ary.length; i<l; i++){
    if(ary[i] === val){
      return true;
    }
  }
  return false;
}
function removeClassName(classNameS, fromElement){
  var x = classNameS.split(/\s/), s = fromElement.className.split(/\s/), r = [];
  for(var i=0,l=s.length; i<l; i++){
    if(!iA(s[i], x))r.push(s[i]);
  }
  fromElement.className = r.join(' ');
}
function addClassName(classNameS, toElement){
  var s = toElement.className.split(/\s/);
  s.push(c); toElement.className = s.join(' ');
}

আমি আমার কোড নিম্নলিখিত ভ্যানিলা জাভাস্ক্রিপ্ট ফাংশন ব্যবহার করুন। তারা নিয়মিত এক্সপ্রেশন এবং indexOf ব্যবহার করে তবে নিয়মিত এক্সপ্রেশনগুলিতে বিশেষ অক্ষর উদ্ধৃত করার প্রয়োজন হয় না।

function addClass(el, cn) {
    var c0 = (" " + el.className + " ").replace(/\s+/g, " "),
        c1 = (" " + cn + " ").replace(/\s+/g, " ");
    if (c0.indexOf(c1) < 0) {
        el.className = (c0 + c1).replace(/\s+/g, " ").replace(/^ | $/g, "");
    }
}

function delClass(el, cn) {
    var c0 = (" " + el.className + " ").replace(/\s+/g, " "),
        c1 = (" " + cn + " ").replace(/\s+/g, " ");
    if (c0.indexOf(c1) >= 0) {
        el.className = c0.replace(c1, " ").replace(/\s+/g, " ").replace(/^ | $/g, "");
    }
}

আপনি আধুনিক ব্রাউজারে element.classList ব্যবহার করতে পারেন।


কোনও অপরাধ নেই, তবে এটি ক্রমাগত ক্লাসে পরিবর্তন করতে চাচ্ছে কারণ এটি সমগ্র ওয়েব পৃষ্ঠাটির চাক্ষুষ উপস্থাপনাটি পুনরায় সিলেক্ট করার জন্য সিএসএস ইন্টারপ্রেটারকে বাধ্য করে।

কারণটি যে কোনও উত্তরাধিকার বা ক্যাসকেডিং পরিবর্তিত হতে পারে কিনা তা জানতে সিএসএস ইন্টারপ্রেটারের পক্ষে প্রায় অসম্ভব, তাই সংক্ষিপ্ত উত্তর হল:

কখনও ক্লাসে নাম পরিবর্তন করবেন না! -)

কিন্তু সাধারণত আপনি শুধুমাত্র একটি সম্পত্তি বা দুই পরিবর্তন করতে হবে, এবং যে সহজে প্রয়োগ করা হয়:

function highlight(elm){
    elm.style.backgroundColor ="#345";
    elm.style.color = "#fff";
}

আই 6 সমর্থন সহ ভ্যানিলা জাভাস্ক্রিপ্টে একটি উপাদান এর ক্লাস পরিবর্তন করুন

এমনকি আপনি IE6 এমনকি পুরানো ব্রাউজারগুলির সাথে সামঞ্জস্য রাখতে নড attributes সম্পত্তি ব্যবহার করার চেষ্টা করতে পারেন:

function getClassNode(element) {
  for (var i = element.attributes.length; i--;)
    if (element.attributes[i].nodeName === 'class')
      return element.attributes[i];
}

function removeClass(classNode, className) {
  var index, classList = classNode.value.split(' ');
  if ((index = classList.indexOf(className)) > -1) {
    classList.splice(index, 1);
    classNode.value = classList.join(' ');
  }
}

function hasClass(classNode, className) {
  return classNode.value.indexOf(className) > -1;
}

function addClass(classNode, className) {
  if (!hasClass(classNode, className))
    classNode.value += ' ' + className;
}

document.getElementById('message').addEventListener('click', function() {
  var classNode = getClassNode(this);
  var className = hasClass(classNode, 'red') && 'blue' || 'red';

  removeClass(classNode, 'red');
  removeClass(classNode, 'blue');

  addClass(classNode, className);
})
.red {
  color: red;
}
.red:before {
  content: 'I am red! ';
}
.red:after {
  content: ' again';
}
.blue {
  color: blue;
}
.blue:before {
  content: 'I am blue! '
}
<span id="message" class="">Click me</span>


পাশাপাশি ক্লাস যুক্ত করতে, অপসারণ, টগল এবং চেক করার পদ্ধতিগুলি যোগ করার জন্য আপনি HTMLElement অবজেক্টটি প্রসারিত করতে পারেন:

HTMLElement = typeof(HTMLElement) != 'undefiend' ? HTMLElement : Element;

HTMLElement.prototype.addClass = function(string) {
  if (!(string instanceof Array)) {
    string = string.split(' ');
  }
  for(var i = 0, len = string.length; i < len; ++i) {
    if (string[i] && !new RegExp('(\\s+|^)' + string[i] + '(\\s+|$)').test(this.className)) {
      this.className = this.className.trim() + ' ' + string[i];
    }
  }
}

HTMLElement.prototype.removeClass = function(string) {
  if (!(string instanceof Array)) {
    string = string.split(' ');
  }
  for(var i = 0, len = string.length; i < len; ++i) {
    this.className = this.className.replace(new RegExp('(\\s+|^)' + string[i] + '(\\s+|$)'), ' ').trim();
  }
}

HTMLElement.prototype.toggleClass = function(string) {
  if (string) {
    if (new RegExp('(\\s+|^)' + string + '(\\s+|$)').test(this.className)) {
      this.className = this.className.replace(new RegExp('(\\s+|^)' + string + '(\\s+|$)'), ' ').trim();
    } else {
      this.className = this.className.trim() + ' ' + string;
    }
  }
}

HTMLElement.prototype.hasClass = function(string) {
  return string && new RegExp('(\\s+|^)' + string + '(\\s+|$)').test(this.className);
}

এবং তারপরে এটিকেই ব্যবহার করুন (ক্লিকে যোগ বা শ্রেণি সরিয়ে ফেলা হবে):

document.getElementById('yourElementId').onclick = function() {
  this.toggleClass('active');
}

এখানে demo


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

আমি আমার জাভাস্ক্রিপ্ট ফ্রেমওয়ার্কের কয়েকটি কার্যকারিতা যুক্ত করতে চাই যা নিম্নোক্ত কার্যকারিতাগুলি যুক্ত করতে পারে যা জাভাস্ক্রিপ্টের মতো ক্লাসগুলি যোগ করে, শ্রেণীগুলি মোছা ইত্যাদি যুক্ত করে, এটি IE9 + এ সম্পূর্ণরূপে সমর্থিত, আমার কোডটি ES6 এও লিখিত হয়, তাই আপনার প্রয়োজন আপনার ব্রাউজারটি এটি সমর্থন করে বা আপনি বাবেল মত কিছু ব্যবহার করে তা নিশ্চিত করতে, অন্যথায় আপনার কোডে ES5 সিনট্যাক্স ব্যবহার করতে হবে, এইভাবে আমরা আইডি এর মাধ্যমে উপাদান খুঁজে পাচ্ছি, যার অর্থ হল উপাদানটির একটি আইডি নির্বাচন করা দরকার:

//simple javascript utils for class management in ES6
var classUtil = {

  addClass: (id, cl) => {
    document.getElementById(id).classList.add(cl);
  },

  removeClass: (id, cl) => {
    document.getElementById(id).classList.remove(cl);
  },

  hasClass: (id, cl) => {
    return document.getElementById(id).classList.contains(cl);
  },

  toggleClass: (id, cl) => {
    document.getElementById(id).classList.toggle(cl);
  }

}

এবং আপনি কেবল নীচের হিসাবে তাদের ব্যবহার করতে কল করতে পারেন, কল্পনা করুন আপনার উপাদানটি 'আইডি' এবং 'বর্গ' শ্রেণির আইডি আছে, তা নিশ্চিত করুন যে আপনি তাদের একটি স্ট্রিং হিসাবে পাস করেন, আপনি নীচের হিসাবে ব্যবহারটি ব্যবহার করতে পারেন:

classUtil.addClass('myId', 'myClass');
classUtil.removeClass('myId', 'myClass');
classUtil.hasClass('myId', 'myClass');
classUtil.toggleClass('myId', 'myClass');




dom