क्लासिस्ट के साथ कोड IE में काम नहीं करता है?

Question 1

मैं निम्नलिखित कोड का उपयोग कर रहा हूं, लेकिन IE में यह विफल हो रहा है। संदेश है:

संपत्ति का मूल्य 'जोड़' पाने में असमर्थ: ऑब्जेक्ट अशक्त या अपरिभाषित है "

मुझे लगता है कि यह सिर्फ एक IE समर्थन मुद्दा है। आप IE में निम्नलिखित कोड काम कैसे करेंगे?

कोई विचार?

var img = new Image();
img.src = '/image/file.png';
img.title = 'this is a title';
img.classList.add("profilePic");
var div = document.createElement("div");
div.classList.add("picWindow");
div.appendChild(img);
content.appendChild(div);

Question 2

classListसंपत्ति IE9 और कम द्वारा समर्थित नहीं है। IE10 + हालांकि इसका समर्थन करता है। इसके बजाय
उपयोग करें className += " .."। ध्यान दें: अंतरिक्ष को छोड़ना नहीं चाहिए: वर्ग के नाम एक सफेद-अंतरिक्ष अलग सूची में जोड़े जाने चाहिए।

var img = new Image();
img.src = '/image/file.png';
img.title = 'this is a title';
img.className += " profilePic"; // Add profilePic class to the image

var div = document.createElement("div");
div.className += " picWindow";  // Add picWindow class to the div
div.appendChild(img);
content.appendChild(div);

Question 3

जैसा कि othes द्वारा उल्लेख किया गया है, classListIE9 और पुराने द्वारा समर्थित नहीं है। ऊपर एलेक्स के विकल्प के साथ-साथ, पॉलीफ़िल के एक जोड़े हैं जो एक ड्रॉप-इन रिप्लेसमेंट होने का लक्ष्य रखते हैं, यानी बस इन्हें अपने पेज में शामिल करें और IE को बस काम करना चाहिए (प्रसिद्ध अंतिम शब्द!)।

https://github.com/eligrey/classList.js/blob/master/classList.js

https://gist.github.com/devongovett/1381839

Question 4

    /**
 * Method that checks whether cls is present in element object.
 * @param  {Object} ele DOM element which needs to be checked
 * @param  {Object} cls Classname is tested
 * @return {Boolean} True if cls is present, false otherwise.
 */
function hasClass(ele, cls) {
    return ele.getAttribute('class').indexOf(cls) > -1;
}

/**
 * Method that adds a class to given element.
 * @param  {Object} ele DOM element where class needs to be added
 * @param  {Object} cls Classname which is to be added
 * @return {null} nothing is returned.
 */
function addClass(ele, cls) {
    if (ele.classList) {
        ele.classList.add(cls);
    } else if (!hasClass(ele, cls)) {
        ele.setAttribute('class', ele.getAttribute('class') + ' ' + cls);
    }
}

/**
 * Method that does a check to ensure that class is removed from element.
 * @param  {Object} ele DOM element where class needs to be removed
 * @param  {Object} cls Classname which is to be removed
 * @return {null} Null nothing is returned.
 */
function removeClass(ele, cls) {
    if (ele.classList) {
        ele.classList.remove(cls);
    } else if (hasClass(ele, cls)) {
        ele.setAttribute('class', ele.getAttribute('class').replace(cls, ' '));
    }
}

Question 5

इसकी जांच करें

Object.defineProperty(Element.prototype, 'classList', {
    get: function() {
        var self = this, bValue = self.className.split(" ")

        bValue.add = function (){
            var b;
            for(i in arguments){
                b = true;
                for (var j = 0; j<bValue.length;j++)
                    if (bValue[j] == arguments[i]){
                        b = false
                        break
                    }
                if(b)
                    self.className += (self.className?" ":"")+arguments[i]
            }
        }
        bValue.remove = function(){
            self.className = ""
            for(i in arguments)
                for (var j = 0; j<bValue.length;j++)
                    if(bValue[j] != arguments[i])
                        self.className += (self.className?" " :"")+bValue[j]
        }
        bValue.toggle = function(x){
            var b;
            if(x){
                self.className = ""
                b = false;
                for (var j = 0; j<bValue.length;j++)
                    if(bValue[j] != x){
                        self.className += (self.className?" " :"")+bValue[j]
                        b = false
                    } else b = true
                if(!b)
                    self.className += (self.className?" ":"")+x
            } else throw new TypeError("Failed to execute 'toggle': 1 argument required")
            return !b;
        }

        return bValue; 
    },
    enumerable: false
})

और क्लासिस्ट काम करेगा!

document.getElementsByTagName("div")[0].classList
["aclass"]

document.getElementsByTagName("div")[0].classList.add("myclass")

document.getElementsByTagName("div")[0].className
"aclass myclass"

बस इतना ही!

Question 6

IE 10 और 11 में, क्लासिस्ट संपत्ति को HTMLElement.prototype पर परिभाषित किया गया है।

एसवीजी-तत्वों पर काम करने के लिए इसे प्राप्त करने के लिए, संपत्ति को Element.prototype पर परिभाषित किया जाना चाहिए, जैसे कि यह अन्य ब्राउज़रों पर किया गया है।

एक बहुत छोटा फिक्स HTMLElement.prototype से Element.prototype के लिए सटीक प्रॉपर्टीस्क्रिप्ट की प्रतिलिपि बनाना होगा:

if (!Object.getOwnPropertyDescriptor(Element.prototype,'classList')){
    if (HTMLElement&&Object.getOwnPropertyDescriptor(HTMLElement.prototype,'classList')){
        Object.defineProperty(Element.prototype,'classList',Object.getOwnPropertyDescriptor(HTMLElement.prototype,'classList'));
    }
}

हमें डिस्क्रिप्टर की प्रतिलिपि बनाने की आवश्यकता है, क्योंकि Element.prototype.classList = HTMLElement.prototype.classListफेंक देंगेInvalid calling object
पहला चेक ब्राउज़र पर संपत्ति को अधिलेखित करने से रोकता है जो समर्थन मूल रूप से है।
दूसरा चेक 9 से पहले IE संस्करणों पर त्रुटियों को रोकता है, जहां HTMLElement अभी तक लागू नहीं किया गया है, और IE9 पर जहां क्लासिस्ट लागू नहीं है।

IE 8 और 9 के लिए, निम्न कोड का उपयोग करें, मैंने Array.prototype.indexOf के लिए एक (minified) पॉलीफ़िल भी शामिल किया है, क्योंकि IE 8 मूल रूप से इसका समर्थन नहीं करता है (polyfill source: Array.prototype.indexOf

//Polyfill Array.prototype.indexOf
Array.prototype.indexOf||(Array.prototype.indexOf=function (value,startIndex){'use strict';if (this==null)throw new TypeError('array.prototype.indexOf called on null or undefined');var o=Object(this),l=o.length>>>0;if(l===0)return -1;var n=startIndex|0,k=Math.max(n>=0?n:l-Math.abs(n),0)-1;function sameOrNaN(a,b){return a===b||(typeof a==='number'&&typeof b==='number'&&isNaN(a)&&isNaN(b))}while(++k<l)if(k in o&&sameOrNaN(o[k],value))return k;return -1});

// adds classList support (as Array) to Element.prototype for IE8-9
Object.defineProperty(Element.prototype,'classList',{
    get:function(){
        var element=this,domTokenList=(element.getAttribute('class')||'').replace(/^\s+|\s$/g,'').split(/\s+/g);
        if (domTokenList[0]==='') domTokenList.splice(0,1);
        function setClass(){
            if (domTokenList.length > 0) element.setAttribute('class', domTokenList.join(' ');
            else element.removeAttribute('class');
        }
        domTokenList.toggle=function(className,force){
            if (force!==undefined){
                if (force) domTokenList.add(className);
                else domTokenList.remove(className);
            }
            else {
                if (domTokenList.indexOf(className)!==-1) domTokenList.splice(domTokenList.indexOf(className),1);
                else domTokenList.push(className);
            }
            setClass();
        };
        domTokenList.add=function(){
            var args=[].slice.call(arguments)
            for (var i=0,l=args.length;i<l;i++){
                if (domTokenList.indexOf(args[i])===-1) domTokenList.push(args[i])
            };
            setClass();
        };
        domTokenList.remove=function(){
            var args=[].slice.call(arguments)
            for (var i=0,l=args.length;i<l;i++){
                if (domTokenList.indexOf(args[i])!==-1) domTokenList.splice(domTokenList.indexOf(args[i]),1);
            };
            setClass();
        };
        domTokenList.item=function(i){
            return domTokenList[i];
        };
        domTokenList.contains=function(className){
            return domTokenList.indexOf(className)!==-1;
        };
        domTokenList.replace=function(oldClass,newClass){
            if (domTokenList.indexOf(oldClass)!==-1) domTokenList.splice(domTokenList.indexOf(oldClass),1,newClass);
            setClass();
        };
        domTokenList.value = (element.getAttribute('class')||'');
        return domTokenList;
    }
});

Question 7

एक्सप्लोरर 11 में classList.add केवल एकल मानों के साथ काम करता है।

Element.classList.add("classOne", "classTwo");

इस मामले में एक्सप्लोरर केवल प्रथम श्रेणी जोड़ता है और दूसरे को अनदेखा करता है। तो करने की जरूरत है:

Element.classList.add("classOne");
Element.classList.add("classTwo");

Question 8

classListIE <9. में समर्थित नहीं है । https://developer.mozilla.org/en-US/docs/Web/API/Element/classList पर jQuery.addClass या पॉलीफ़िल का उपयोग करें।