자바 스크립트에서 객체 추가 및 삭제

Question

나는이 권한이 있지만 자바 스크립트 코드에서 두 개의 별도 메소드를 사용하여 추가 및 삭제하려고하는 것으로 확신한다.

첫 번째 것은 특별히 classStr을 el이라는 HTML 요소 개체에 추가하려고 시도하고 있습니다 (className). 이미 classStr이 포함되어 있으면 그대로 유지됩니다.

var addClass = function addClass(el, classStr) { 
    if(el.className !== classStr) { 
     el.className = classStr; 
    } 
}; 

이 하나

, 나는 간단히 공백을 떠나지 않고 className에서 classStr을 삭제하려합니다. el은 요소 개체입니다. 내가 확신 할 수없는 유일한 것은, 내가 공백을 남기고있는 경우입니다.

var removeClasfunction = function removeClass(el, classStr) { 
    delete el.className; 
}; 

Answer 1

함수의 주요 단점은 개체의 여러 클래스 이름을 처리하지 않는다는 것입니다. 또한 클래스 이름이없는 경우 빈 문자열로 설정하기 만하면 실제로 속성 이름을 제거하지 않으려 고합니다.

다음은 계획해야하는 대상인 개체에 둘 이상의 클래스 이름이있을 때 작동하는 클래스 이름을 관리하기위한 유틸리티 함수 집합입니다. 추가 공백이 누적되지 않습니다.

function addClass(elem, cls) { 
    if (!hasClass(elem, cls)) { 
     var oldCls = elem.className; 
     if (oldCls) { 
      oldCls += " "; 
     } 
     elem.className = oldCls + cls; 
    } 
} 

function removeClass(elem, cls) { 
    var str = " " + elem.className + " "; 
    elem.className = str.replace(" " + cls + " ", " ").replace(/^\s+|\s+$/g, ""); 
} 

function hasClass(elem, cls) { 
    var str = " " + elem.className + " "; 
    var testCls = " " + cls + " "; 
    return(str.indexOf(testCls) !== -1) ; 
} 

function toggleClass(elem, cls) { 
    if (hasClass(elem, cls)) { 
     removeClass(elem, cls); 
    } else { 
     addClass(elem, cls); 
    } 
}