JavaScript에서 클래스를 추가 / 제거하는 방법은 무엇입니까?
이후 element.classList대안 크로스 브라우저 솔루션은 무엇인가, IE 9, 사파리 5에서 지원되지 않는 이유는 무엇입니까?
솔루션 은 최소한 IE 9 , Safari 5 , FireFox 4, Opera 11.5 및 Chrome 에서 작동 해야합니다 .
관련 게시물 (솔루션은 포함되지 않음) :
프레임 워크 / 라이브러리가없는 클래스를 가지고 놀 수있는 한 가지 방법은 " 지정된 요소의 클래스 속성 값을 가져오고 설정 하는"속성 Element.className을 사용하는 것 입니다 ( MDN 문서에서 ).
따라 @ 마티아스 - fidemraizer 이미 당신이 당신의 요소 클래스의 문자열을 일단 당신이 그것을 수정하는 문자열에 관련된 모든 방법을 사용할 수 있습니다, 그의 대답에 언급했다.
예를 들면 다음과 같습니다
. ID가 "myDiv"인 div가 있고 사용자가 클릭 할 때 "main__section"클래스를 추가하려는 경우,
window.onload = init;
function init() {
document.getElementById("myDiv").onclick = addMyClass;
}
function addMyClass() {
var classString = this.className; // returns the string of all the classes for myDiv
var newClass = classString.concat(" main__section"); // Adds the class "main__section" to the string (notice the leading space)
this.className = newClass; // sets className to the new string
}
다음은 순수한 자바 스크립트 솔루션의 addClass, removeClass, hasClass에 대한 솔루션입니다.
실제로 http://jaketrent.com/post/addremove-classes-raw-javascript/ 에서 왔습니다.
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,' ');
}
}
나는 이것들을 썼다.
function addClass(el, classNameToAdd){
el.className += ' ' + classNameToAdd;
}
function removeClass(el, classNameToRemove){
var elClass = ' ' + el.className + ' ';
while(elClass.indexOf(' ' + classNameToRemove + ' ') !== -1){
elClass = elClass.replace(' ' + classNameToRemove + ' ', '');
}
el.className = elClass;
}
나는 그들이 모든 브라우저에서 작동 할 것이라고 생각합니다.
가장 간단한은 element.classList가지고있는 remove(name), add(name), toggle(name),과 contains(name)방법을 지금되는 모든 주요 브라우저에서 지원 .
들어 오래된 브라우저 당신은 변경 element.className. 다음은 두 가지 도우미입니다.
function addClass(element, className){
element.className += ' ' + className;
}
function removeClass(element, className) {
element.className = element.className.replace(
new RegExp('( |^)' + className + '( |$)', 'g'), ' ').trim();
}
이 oneliners를보십시오 :
수업 제거 :
element.classList.remove('hidden');클래스 전환 (아직없는 경우 클래스를 추가하고있는 경우 제거)
element.classList.toggle('hidden');
그게 다야! 나는 테스트를했다-10000 반복. 0.8 초.
이 Mozilla 개발자 네트워크 기사를 읽으십시오.
element.className 속성은 문자열 유형 이므로 모든 JavaScript 구현에서 찾을 수있는 일반 String 개체 함수를 사용할 수 있습니다.
클래스를 추가
String.indexOf하려면 먼저 className에 클래스가 있는지 확인하기 위해 사용하십시오 . 존재하지 않는 경우 공백 문자와 새 클래스 이름을이 속성에 연결하면됩니다. 있는 경우 아무 작업도하지 마십시오.클래스를 제거하려면
String.replace"[className]"을 빈 문자열로 바꾸고을 사용하십시오 . 마지막으로를 사용String.trim하여 시작과 끝에있는 공백 문자를 제거element.className합니다.
@Paulpro의 솔루션 수정
- 예약어이므로 "class"를 사용하지 마십시오.
removeClass반복 사용 후 버그가 발생하여 기능이 손상되었습니다.
`
function addClass(el, newClassName){
el.className += ' ' + newClassName;
}
function removeClass(el, removeClassName){
var elClass = el.className;
while(elClass.indexOf(removeClassName) != -1) {
elClass = elClass.replace(removeClassName, '');
elClass = elClass.trim();
}
el.className = elClass;
}
해결책은
심 .classList:
중 하나를 사용하여 DOM-심을 또는 아래에 엘리 회색의 심을 사용
면책 조항 : 지원이 FF3.6 +, Opera10 +, FF5, Chrome, IE8 +라고 생각합니다.
/*
* classList.js: Cross-browser full element.classList implementation.
* 2011-06-15
*
* By Eli Grey, http://eligrey.com
* Public Domain.
* NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK.
*/
/*global self, document, DOMException */
/*! @source http://purl.eligrey.com/github/classList.js/blob/master/classList.js*/
if (typeof document !== "undefined" && !("classList" in document.createElement("a"))) {
(function (view) {
"use strict";
var
classListProp = "classList"
, protoProp = "prototype"
, elemCtrProto = (view.HTMLElement || view.Element)[protoProp]
, objCtr = Object
, strTrim = String[protoProp].trim || function () {
return this.replace(/^\s+|\s+$/g, "");
}
, arrIndexOf = Array[protoProp].indexOf || function (item) {
var
i = 0
, len = this.length
;
for (; i < len; i++) {
if (i in this && this[i] === item) {
return i;
}
}
return -1;
}
// Vendors: please allow content code to instantiate DOMExceptions
, DOMEx = function (type, message) {
this.name = type;
this.code = DOMException[type];
this.message = message;
}
, checkTokenAndGetIndex = function (classList, token) {
if (token === "") {
throw new DOMEx(
"SYNTAX_ERR"
, "An invalid or illegal string was specified"
);
}
if (/\s/.test(token)) {
throw new DOMEx(
"INVALID_CHARACTER_ERR"
, "String contains an invalid character"
);
}
return arrIndexOf.call(classList, token);
}
, ClassList = function (elem) {
var
trimmedClasses = strTrim.call(elem.className)
, classes = trimmedClasses ? trimmedClasses.split(/\s+/) : []
, i = 0
, len = classes.length
;
for (; i < len; i++) {
this.push(classes[i]);
}
this._updateClassName = function () {
elem.className = this.toString();
};
}
, classListProto = ClassList[protoProp] = []
, classListGetter = function () {
return new ClassList(this);
}
;
// Most DOMException implementations don't allow calling DOMException's toString()
// on non-DOMExceptions. Error's toString() is sufficient here.
DOMEx[protoProp] = Error[protoProp];
classListProto.item = function (i) {
return this[i] || null;
};
classListProto.contains = function (token) {
token += "";
return checkTokenAndGetIndex(this, token) !== -1;
};
classListProto.add = function (token) {
token += "";
if (checkTokenAndGetIndex(this, token) === -1) {
this.push(token);
this._updateClassName();
}
};
classListProto.remove = function (token) {
token += "";
var index = checkTokenAndGetIndex(this, token);
if (index !== -1) {
this.splice(index, 1);
this._updateClassName();
}
};
classListProto.toggle = function (token) {
token += "";
if (checkTokenAndGetIndex(this, token) === -1) {
this.add(token);
} else {
this.remove(token);
}
};
classListProto.toString = function () {
return this.join(" ");
};
if (objCtr.defineProperty) {
var classListPropDesc = {
get: classListGetter
, enumerable: true
, configurable: true
};
try {
objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc);
} catch (ex) { // IE 8 doesn't support enumerable:true
if (ex.number === -0x7FF5EC54) {
classListPropDesc.enumerable = false;
objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc);
}
}
} else if (objCtr[protoProp].__defineGetter__) {
elemCtrProto.__defineGetter__(classListProp, classListGetter);
}
}(self));
}
function addClass(element, classString) {
element.className = element
.className
.split(' ')
.filter(function (name) { return name !== classString; })
.concat(classString)
.join(' ');
}
function removeClass(element, classString) {
element.className = element
.className
.split(' ')
.filter(function (name) { return name !== classString; })
.join(' ');
}
누군가 요소에 대한 프로토 타입 함수를 만들고 싶은 경우를 대비하여 다른 객체의 클래스를 조작해야 할 때 다음을 사용합니다.
Element.prototype.addClass = function (classToAdd) {
var classes = this.className.split(' ')
if (classes.indexOf(classToAdd) === -1) classes.push(classToAdd)
this.className = classes.join(' ')
}
Element.prototype.removeClass = function (classToRemove) {
var classes = this.className.split(' ')
var idx =classes.indexOf(classToRemove)
if (idx !== -1) classes.splice(idx,1)
this.className = classes.join(' ')
}
그들처럼 사용 document.body.addClass('whatever')또는document.body.removeClass('whatever')
본문 대신 다른 요소 (div, span, 이름 지정)를 사용할 수도 있습니다.
에밀 코드의 개선 된 버전 (trim () 사용)
function hasClass(ele,cls) {
return !!ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
}
function addClass(ele,cls) {
if (!hasClass(ele,cls)) ele.className = ele.className.trim() + " " + cls;
}
function removeClass(ele,cls) {
if (hasClass(ele,cls)) {
var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
ele.className = ele.className.replace(reg,' ');
ele.className = ele.className.trim();
}
}
CSS 클래스 추가 : cssClassesStr += cssClassName;
CSS 클래스를 제거하십시오. cssClassStr = cssClassStr.replace(cssClassName,"");
'클래스'속성 추가 : object.setAttribute("class", ""); //pure addition of this attribute
속성 제거 : object.removeAttribute("class");
이해하기 쉬운 방법 :
// Add class
DOMElement.className += " one";
// Example:
// var el = document.body;
// el.className += " two"
// Remove class
function removeDOMClass(element, className) {
var oldClasses = element.className,
oldClassesArray = oldClasses.split(" "),
newClassesArray = [],
newClasses;
// Sort
var currentClassChecked,
i;
for ( i = 0; i < oldClassesArray.length; i++ ) {
// Specified class will not be added in the new array
currentClassChecked = oldClassesArray[i];
if( currentClassChecked !== className ) {
newClassesArray.push(currentClassChecked);
}
}
// Order
newClasses = newClassesArray.join(" ");
// Apply
element.className = newClasses;
return element;
}
// Example:
// var el = document.body;
// removeDOMClass(el, "two")
https://gist.github.com/sorcamarian/ff8db48c4dbf4f5000982072611955a2
참고 URL : https://stackoverflow.com/questions/6787383/how-to-add-remove-a-class-in-javascript
'Programing' 카테고리의 다른 글
| 코드베이스를 처음부터 다시 작성해야하는 경우 (0) | 2020.11.30 |
|---|---|
| Lisp 및 Erlang Atoms, Ruby 및 구성표 기호. (0) | 2020.11.30 |
| Qt에서 창의 제목을 변경하는 방법은 무엇입니까? (0) | 2020.11.30 |
| 많은 경고를 제공하는 Rails 4의 RSpec으로 보호 (0) | 2020.11.30 |
| KitKat 용 Android 5.0 머티리얼 디자인 스타일 탐색 창 (0) | 2020.11.30 |