javascript - অবজ - বুটস্ট্রাপ টিউটোরিয়াল




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

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


আই 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>


ক্লাস পরিবর্তন করার জন্য আধুনিক HTML5 প্রযুক্তি

আধুনিক ব্রাউজারগুলি classList যোগ classList যা কোন লাইব্রেরী ছাড়াই ক্লাসগুলিকে ম্যানিপুলেশন করা সহজতর করার পদ্ধতি সরবরাহ করে:

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 এর আগে ইন্টারনেট এক্সপ্লোরারে কাজ করে না, যদিও classList পাওয়া IE8 এবং IE9 এর জন্য এটি সমর্থন করার জন্য একটি shim আছে। এটা, যদিও, আরো এবং আরো supported

সহজ ক্রস ব্রাউজার সমাধান

একটি উপাদান নির্বাচন করার জন্য আদর্শ JavaScript পদ্ধতিটি হল document.getElementById("Id") ব্যবহার করা যা নিম্নোক্ত উদাহরণগুলি ব্যবহার করে - আপনি অবশ্যই অন্য উপায়ে উপাদানগুলি পেতে পারেন এবং সঠিক অবস্থানে কেবল this পরিবর্তে ব্যবহার করতে পারেন - তবে, এই বিষয়ে বিস্তারিতভাবে উত্তর উত্তর অতিক্রম করা হয়।

একটি উপাদান জন্য সব ক্লাস পরিবর্তন করতে:

এক বা একাধিক নতুন ক্লাস সহ সমস্ত বিদ্যমান ক্লাস প্রতিস্থাপন করতে, শ্রেণীনাম বৈশিষ্ট্যটি সেট করুন:

document.getElementById("MyElement").className = "MyClass";

(আপনি একাধিক ক্লাস প্রয়োগ করতে একটি স্থান-সীমিত তালিকা ব্যবহার করতে পারেন।)

একটি উপাদান একটি অতিরিক্ত ক্লাস যোগ করার জন্য:

একটি উপাদানতে একটি শ্রেণী যোগ করার জন্য, বিদ্যমান মানগুলি সরিয়ে / প্রভাবিত না করে, একটি স্থান এবং নতুন ক্লাস নাম যোগ করুন, যেমন:

document.getElementById("MyElement").className += " MyClass";

একটি উপাদান থেকে একটি ক্লাস মুছে ফেলার জন্য:

অন্যান্য সম্ভাব্য ক্লাসগুলিকে প্রভাবিত না করে একটি উপাদানতে একটি একক শ্রেণী সরাতে, একটি সহজ regex প্রতিস্থাপন প্রয়োজন:

document.getElementById("MyElement").className =
   document.getElementById("MyElement").className.replace
      ( /(?:^|\s)MyClass(?!\S)/g , '' )
/* Code wrapped for readability - above is all one statement */

এই regex একটি ব্যাখ্যা নিম্নরূপ:

(?:^|\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 ঘটনা এই কর্ম নির্ধারণ করা:

এইচটিএমএল ইভেন্ট বৈশিষ্ট্যগুলির মধ্যে সরাসরি জাভাস্ক্রিপ্ট লিখতে গেলে (যেমন onclick="this.className+=' MyClass'" ) এটি প্রস্তাবিত আচরণ নয়। বিশেষ করে বৃহত্তর অ্যাপ্লিকেশনগুলিতে, আরো রক্ষণযোগ্য কোড জাভাস্ক্রিপ্ট ইন্টারঅ্যাকশন লজিক থেকে HTML মার্কআপ আলাদা করে অর্জন করা হয়।

এটি অর্জনের প্রথম ধাপটি একটি ফাংশন তৈরি করে এবং ফাংশনটিকে অনকেলিক বৈশিষ্ট্যে কল করা হয়, উদাহরণস্বরূপ:

<script type="text/javascript">
    function changeClass(){
        // Code examples from above
    }
</script>
...
<button onclick="changeClass()">My Button</button>

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

দ্বিতীয় ধাপটি এইচটিএমএল এবং জাভাস্ক্রিপ্টে addEventListener ইভেন্টটি সরানো হয়, উদাহরণস্বরূপ 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 ব্যবহার করে নীচের পুনঃপ্রবর্তন করা হয়েছে, সম্ভবত সর্বাধিক ব্যবহৃত JavaScript লাইব্রেরি (যদিও অনুসন্ধানের জন্য অন্যগুলিও রয়েছে)।

(মনে রাখবেন যে এখানে $ 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);



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

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

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

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 ব্যবহার করা ভাল হবে।


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

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

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

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

আপনি যেমন node.className ব্যবহার করতে পারেন:

document.getElementById('foo').className = 'bar';

এই PPK অনুযায়ী IE5.5 এবং আপ কাজ করা উচিত।


আমি আমার কোড নিম্নলিখিত ভ্যানিলা জাভাস্ক্রিপ্ট ফাংশন ব্যবহার করুন। তারা নিয়মিত এক্সপ্রেশন এবং 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 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")' >

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

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

এখানে,

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

গুড লাক।


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

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

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

কেবলমাত্র myElement.classList="new-class" যদি না আপনি অন্যান্য বিদ্যমান ক্লাসগুলি বজায় রাখতে চান, তবে আপনি ক্লাস classList.add, .remove পদ্ধতিগুলি ব্যবহার করতে পারেন।

var doc = document;
var divOne = doc.getElementById("one");
var goButton = doc.getElementById("go");

goButton.addEventListener("click", function() {
  divOne.classList="blue";
});
div{
  min-height:48px;
  min-width:48px;
}
.bordered{
  border: 1px solid black;
}
.green{
  background:green;
}
.blue{
  background: blue;
}
<button id="go">Change Class</button>

<div id="one" class="bordered green">

</div>


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

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

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

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

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

পাশাপাশি ক্লাস যুক্ত করতে, অপসারণ, টগল এবং চেক করার পদ্ধতিগুলি যোগ করার জন্য আপনি 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


পূর্ববর্তী regexes উপর ছোটখাট নোট এবং tweaks একটি দম্পতি:

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

এই regex কেস অসংবেদক যাতে ক্লাসের নামগুলিতে বাগগুলি এমন ব্রাউজারে ব্যবহৃত হওয়ার আগে প্রদর্শিত হতে পারে যা ক্লাসের নামগুলির ক্ষেত্রে কোনও যত্ন নেয় না।

var s = "testing   one   four  one  two";
var cls = "one";
var rg          = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");
var cls = "test";
var rg          = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");
var cls = "testing";
var rg          = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");
var cls = "tWo";
var rg          = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");

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

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

লাইন

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

হতে হবে:

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

ASP.NET জাভাস্ক্রিপ্টের সাথে একটি উপাদান এর CSS শ্রেণী পরিবর্তন করুন:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If Not Page.IsPostBack Then
        lbSave.Attributes.Add("onmouseover", "this.className = 'LinkButtonStyle1'")
        lbSave.Attributes.Add("onmouseout", "this.className = 'LinkButtonStyle'")
        lbCancel.Attributes.Add("onmouseover", "this.className = 'LinkButtonStyle1'")
        lbCancel.Attributes.Add("onmouseout", "this.className = 'LinkButtonStyle'")
    End If
End Sub





dom