주어진 요소에 클래스를 어떻게 추가합니까?

development

주어진 요소에 클래스를 어떻게 추가합니까?

big-blog 2020. 9. 27. 13:01

주어진 요소에 클래스를 어떻게 추가합니까?

이미 클래스가있는 요소가 있습니다.

<div class="someclass">
    <img ... id="image1" name="image1" />
</div>

이제 div(대체가 아니라 추가) 클래스를 추가하는 JavaScript 함수를 만들고 싶습니다 .

어떻게 할 수 있습니까?

className요소 의 속성에 공백과 새 클래스 이름을 추가합니다 . 먼저 id참조를 쉽게 얻을 수 있도록 요소에를 입력하십시오.

<div id="div1" class="someclass">
    <img ... id="image1" name="image1" />
</div>

그때

var d = document.getElementById("div1");
d.className += " otherclass";

앞의 공백에 유의하십시오 otherclass. 공백을 포함하는 것이 중요합니다. 그렇지 않으면 클래스 목록에서 앞에 오는 기존 클래스가 손상됩니다.

MDN의 element.className을 참조하십시오 .

프레임 워크없이이를 수행하는 가장 쉬운 방법은 element.classList.add 메소드 를 사용 하는 것입니다.

var element = document.getElementById("div1");
element.classList.add("otherclass");

편집 : 요소에서 클래스를 제거하려면-

element.classList.remove("otherclass");

빈 공간을 추가하지 않고 직접 항목을 처리 할 필요가 없습니다 ( document.className접근법을 사용할 때 필요함 ). 일부 브라우저 제한 사항 이 있지만 polyfill을 사용하여 해결할 수 있습니다.

원하는대로 대상 요소 "d"를 찾은 다음 :

d.className += ' additionalClass'; //note the space

기존의 존재 여부를 확인하고 공간 요구 사항 등을 확인하기 위해 현명한 방법으로 포장 할 수 있습니다.

수업 추가

교차 호환

다음 예 classname에서는 <body>요소에 를 추가합니다 . 이것은 IE-8과 호환됩니다.

var a = document.body;
a.classList ? a.classList.add('classname') : a.className += ' classname';

이것은 다음의 속기입니다 ..

var a = document.body;
if (a.classList) {
    a.classList.add('wait');
} else {
    a.className += ' wait';
}

공연

교차 호환성보다 성능에 더 관심이 있다면 4 % 더 빠른 다음으로 단축 할 수 있습니다.
```
var z = document.body;
document.body.classList.add('wait');
```

편의

또는 jQuery를 사용할 수 있지만 결과 성능이 상당히 느립니다. jsPerf에 따르면 94 % 느림
```
$('body').addClass('wait');
```

수업 제거

공연

성능에 관심이 있다면 jQuery를 선택적으로 사용하는 것이 클래스를 제거하는 가장 좋은 방법입니다.
```
var a = document.body, c = ' classname';
$(a).removeClass(c);
```

jQuery가 없으면 32 % 느립니다.

var a = document.body, c = ' classname';
a.className = a.className.replace( c, '' );
a.className = a.className + c;

참고 문헌

프로토 타입 사용

Element("document.body").ClassNames.add("classname")
Element("document.body").ClassNames.remove("classname")
Element("document.body").ClassNames.set("classname")

YUI 사용

YAHOO.util.Dom.hasClass(document.body,"classname")
YAHOO.util.Dom.addClass(document.body,"classname")
YAHOO.util.Dom.removeClass(document.body,"classname")

순수 JavaScript를 사용하여 요소에 클래스를 추가하는 또 다른 방법

수업을 추가하려면 :

document.getElementById("div1").classList.add("classToBeAdded");

클래스 제거 :

document.getElementById("div1").classList.remove("classToBeRemoved");

내가하는 작업이 라이브러리 사용을 보증하지 않는 경우 다음 두 가지 기능을 사용합니다.

function addClass( classname, element ) {
    var cn = element.className;
    //test for existance
    if( cn.indexOf( classname ) != -1 ) {
        return;
    }
    //add a space if the element already has class
    if( cn != '' ) {
        classname = ' '+classname;
    }
    element.className = cn+classname;
}

function removeClass( classname, element ) {
    var cn = element.className;
    var rxp = new RegExp( "\\s?\\b"+classname+"\\b", "g" );
    cn = cn.replace( rxp, '' );
    element.className = cn;
}

이 하나의 클래스를 추가하는 것 이상을 수행한다고 가정하면 (예 : 비동기 요청이있는 등 계속) Prototype 또는 jQuery 와 같은 라이브러리를 권장합니다 .

이것은 (이것을 포함하여) 당신이해야 할 모든 것을 매우 간단하게 만들 것입니다.

이제 페이지에 jQuery가 있다고 가정하면 다음과 같은 코드를 사용하여 요소에 클래스 이름을 추가 할 수 있습니다 (이 경우로드시).

$(document).ready( function() {
  $('#div1').addClass( 'some_other_class' );
} );

다른 내용 은 jQuery API 브라우저 를 확인하십시오 .

classList.add 또는 classList.remove 메소드를 사용하여 요소에서 클래스를 추가 / 제거 할 수 있습니다.

var nameElem = document.getElementById("name")
nameElem.classList.add("anyclss")

위의 코드는 nameElem에 "anyclass"클래스를 추가 (대체하지 않음)합니다. 마찬가지로 classList.remove () 메서드를 사용하여 클래스를 제거 할 수 있습니다.

nameElem.classList.remove("anyclss")

요소에 추가 클래스를 추가하려면 :

기존 값을 제거 / 영향을주지 않고 요소에 클래스를 추가하려면 다음과 같이 공백과 새 클래스 이름을 추가합니다.

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

요소의 모든 클래스를 변경하려면 :

모든 기존 클래스를 하나 이상의 새 클래스로 바꾸려면 className 속성을 설정하십시오.

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

(공백으로 구분 된 목록을 사용하여 여러 클래스를 적용 할 수 있습니다.)

jQuery를 사용하지 않고 이전 브라우저를 지원하려는 경우 :

function addClass(elem, clazz) {
    if (!elemHasClass(elem, clazz)) {
        elem.className += " " + clazz;
    }
}

function elemHasClass(elem, clazz) {
    return new RegExp("( |^)" + clazz + "( |$)").test(elem.className);
}

나는 IE9가 공식적으로 종료된다는 것을 알고 있으며 element.classList위에서 말한 것처럼 많은 사람들이 그것을 달성 할 수 있지만 위에서 배울 classList수있는 많은 답변의 도움 없이 어떻게 작동하는지 배우려고 했습니다.

아래 코드는 위의 많은 답변을 확장하고 중복 클래스 추가를 방지하여 개선합니다.

function addClass(element,className){
  var classArray = className.split(' ');
  classArray.forEach(function (className) {
    if(!hasClass(element,className)){
      element.className += " "+className;
    }
  });            
}
//this will add 5 only once
addClass(document.querySelector('#getbyid'),'3 4 5 5 5');

다른 사람들이 말한 것을 자세히 설명하기 위해 여러 CSS 클래스가 공백으로 구분 된 단일 문자열로 결합됩니다. 따라서 하드 코딩하려는 경우 다음과 같이 표시됩니다.

<div class="someClass otherClass yetAnotherClass">
      <img ... id="image1" name="image1" />
</div>

거기에서 새 클래스를 추가하는 데 필요한 자바 스크립트를 쉽게 파생 할 수 있습니다. 요소의 className 속성에 새 클래스 다음에 공백을 추가하기 만하면됩니다. 이를 알면 나중에 필요할 때 클래스를 제거하는 함수를 작성할 수도 있습니다.

간단한 방법으로 요소 클래스를 추가, 제거 또는 확인하려면 :

var uclass = {
    exists: function(elem,className){var p = new RegExp('(^| )'+className+'( |$)');return (elem.className && elem.className.match(p));},
    add: function(elem,className){if(uclass.exists(elem,className)){return true;}elem.className += ' '+className;},
    remove: function(elem,className){var c = elem.className;var p = new RegExp('(^| )'+className+'( |$)');c = c.replace(p,' ').replace(/  /g,' ');elem.className = c;}
};

var elem = document.getElementById('someElem');
//Add a class, only if not exists yet.
uclass.add(elem,'someClass');
//Remove class
uclass.remove(elem,'someClass');

jQuery와 유사한 최신 접근 방식을 사용할 수 있습니다.

하나의 요소 만 변경해야하는 경우, JS가 DOM에서 찾는 첫 번째 요소는 다음과 같습니다.

document.querySelector('.someclass').className += " red";

.red {
  color: red;
}

<div class="someclass">
  <p>This method will add class "red" only to first element in DOM</p>
</div>

<div class="someclass">
  <p>lorem ipsum</p>
</div>

<div class="someclass">
  <p>lorem ipsum</p>
</div>

<div class="someclass">
  <p>lorem ipsum</p>
</div>

수업 이름 앞에 한 칸을 남겨 두는 것을 잊지 마십시오 .

새 클래스를 추가하려는 클래스가 여러 개인 경우 다음과 같이 사용할 수 있습니다.

document.querySelectorAll('.someclass').forEach(function(element) {
  element.className += " red";
});

.red {
  color: red;
}

<div class="someclass">
  <p>This method will add class "red" to all elements in DOM that have "someclass" class.</p>
</div>

<div class="someclass">
  <p>lorem ipsum</p>
</div>

<div class="someclass">
  <p>lorem ipsum</p>
</div>

<div class="someclass">
  <p>lorem ipsum</p>
</div>

나는 또한 가장 빠른 방법은 es5에서와 같이 Element.prototype.classList를 사용하는 것이라고 생각합니다. document.querySelector(".my.super-class").classList.add('new-class')그러나 ie8에는 Element.prototype.classList와 같은 것이 없습니다. 어쨌든이 스 니펫으로 폴리 필 할 수 있습니다 (편집하고 개선 할 수 있습니다. ) :

if(Element.prototype.classList === void 0){
	function DOMTokenList(classes, self){
		typeof classes == "string" && (classes = classes.split(' '))
		while(this.length){
			Array.prototype.pop.apply(this);
		}
		Array.prototype.push.apply(this, classes);
		this.__self__ = this.__self__ || self
	}

	DOMTokenList.prototype.item = function (index){
		return this[index];
	}

	DOMTokenList.prototype.contains = function (myClass){
		for(var i = this.length - 1; i >= 0 ; i--){
			if(this[i] === myClass){
				return true;
			}
		}
		return false
	}

	DOMTokenList.prototype.add = function (newClass){
		if(this.contains(newClass)){
			return;
		}
		this.__self__.className += (this.__self__.className?" ":"")+newClass;
		DOMTokenList.call(this, this.__self__.className)
	}

	DOMTokenList.prototype.remove = function (oldClass){
		if(!this.contains(newClass)){
			return;
		}
		this[this.indexOf(oldClass)] = undefined
		this.__self__.className = this.join(' ').replace(/  +/, ' ')
		DOMTokenList.call(this, this.__self__.className)
	}

	DOMTokenList.prototype.toggle = function (aClass){
		this[this.contains(aClass)? 'remove' : 'add'](aClass)
		return this.contains(aClass);
	}

	DOMTokenList.prototype.replace = function (oldClass, newClass){
		this.contains(oldClass) && this.remove(oldClass) && this.add(newClass)
	}

	Object.defineProperty(Element.prototype, 'classList', {
		get: function() {
			return new DOMTokenList( this.className, this );
		},
		enumerable: false
	})
}

브라우저의 DOM에서 실행할 수있는 순수한 JavaScript를 사용하는 것이 더 낫다고 생각합니다.

다음은이를 사용하는 기능적인 방법입니다. ES6를 사용했지만 JavaScript StyleGuide에 맞는 ES5와 함수 표현 또는 함수 정의를 자유롭게 사용하십시오.

'use strict'

const oldAdd = (element, className) => {
  let classes = element.className.split(' ')
  if (classes.indexOf(className) < 0) {
    classes.push(className)
  }
  element.className = classes.join(' ')
}

const oldRemove = (element, className) => {
  let classes = element.className.split(' ')
  const idx = classes.indexOf(className)
  if (idx > -1) {
    classes.splice(idx, 1)
  }
  element.className = classes.join(' ')
}

const addClass = (element, className) => {
  if (element.classList) {
    element.classList.add(className)
  } else {
    oldAdd(element, className)
  }
}

const removeClass = (element, className) => {
  if (element.classList) {
    element.classList.remove(className)
  } else {
    oldRemove(element, className)
  }
}

순수한 JS로 샘플. 첫 번째 예에서는 요소의 ID를 얻고 예를 들어 2 개의 클래스를 추가합니다.

document.addEventListener('DOMContentLoaded', function() {
    document.getElementsById('tabGroup').className = "anyClass1 anyClass2";
})

두 번째 예에서는 요소의 클래스 이름을 얻고 1을 더 추가합니다.

document.addEventListener('DOMContentLoaded', function() {
    document.getElementsByClassName('tabGroup')[0].className = "tabGroup ready";
})

사용하는 사람들을 위해 Lodash을 하고 업데이트를 원하는 className문자열 :

// get element reference
var elem = document.getElementById('myElement');

// add some classes. Eg. 'nav' and 'nav header'
elem.className = _.chain(elem.className).split(/[\s]+/).union(['nav','navHeader']).join(' ').value()

// remove the added classes
elem.className = _.chain(elem.className).split(/[\s]+/).difference(['nav','navHeader']).join(' ').value()

먼저 div에 ID를 제공하십시오. 그런 다음 appendClass 함수를 호출합니다.

<script language="javascript">
  function appendClass(elementId, classToAppend){
    var oldClass = document.getElementById(elementId).getAttribute("class");
    if (oldClass.indexOf(classToAdd) == -1)
    {
      document.getElementById(elementId).setAttribute("class", classToAppend);
    }
}
</script>

You can use the API querySelector to select your element and then create a function with the element and the new classname as parameters. Using classlist for modern browsers, else for IE8. Then you can call the function after an event.

 //select the dom element
 var addClassVar = document.querySelector('.someclass');

 //define the addclass function
 var addClass = function(el,className){
   if (el.classList){
     el.classList.add(className);
   }
   else {
     el.className += ' ' + className;
  }
};

//call the function
addClass(addClassVar, 'newClass');

This js code works for me

provides classname replacement

var DDCdiv = hEle.getElementBy.....

var cssCNs = DDCdiv.getAttribute('class');
var Ta = cssCNs.split(' '); //split into an array
for (var i=0; i< Ta.length;i++)
{
    if (Ta[i] == 'visible'){
        Ta[i] = 'hidden';
        break;// quit for loop
    }
    else if (Ta[i] == 'hidden'){
        Ta[i] = 'visible';
    break;// quit for loop
    }
}
DDCdiv.setAttribute('class',Ta.join(' ') );  // Join array with space and set class name

To add just use

var cssCNs = DDCdiv.getAttribute('class');
var Ta = cssCNs.split(' '); //split into an array
Ta.push('New class name');
// Ta.push('Another class name');//etc...
DDCdiv.setAttribute('class',Ta.join(' ') );  // Join array with space and set class name

To remove use

var cssCNs = DDCdiv.getAttribute('class');
var Ta = cssCNs.split(' '); //split into an array

for (var i=0; i< Ta.length;i++)
{
    if (Ta[i] == 'visible'){
        Ta.splice( i, 1 );
        break;// quit for loop
    }
}
DDCdiv.setAttribute('class',Ta.join(' ') );  // Join array with space and set class name

Hope this is helpful to sombody

In YUI, if you include yuidom, you can use

YAHOO.util.Dom.addClass('div1','className');

HTH

참고URL : https://stackoverflow.com/questions/507138/how-do-i-add-a-class-to-a-given-element

'development' 카테고리의 다른 글

Node.js에 파일 / 디렉토리가 있는지 동 기적으로 확인 (0)	2020.09.27
ArrayList 변환 (0)	2020.09.27
Node.js의 Express.js에서 GET (쿼리 문자열) 변수를 얻는 방법은 무엇입니까? (0)	2020.09.27
git : 새 파일을 포함하여 모든 작업 디렉토리 변경을 취소합니다. (0)	2020.09.27
서블릿은 어떻게 작동합니까? (0)	2020.09.27

현재글주어진 요소에 클래스를 어떻게 추가합니까?

big-blog

주어진 요소에 클래스를 어떻게 추가합니까?

주어진 요소에 클래스를 어떻게 추가합니까?

수업 추가

수업 제거

참고 문헌

프로토 타입 사용

YUI 사용

요소에 추가 클래스를 추가하려면 :

요소의 모든 클래스를 변경하려면 :

'development' 카테고리의 다른 글

'development'의 다른글

티스토리툴바

주어진 요소에 클래스를 어떻게 추가합니까?

주어진 요소에 클래스를 어떻게 추가합니까?

수업 추가

수업 제거

참고 문헌

프로토 타입 사용

YUI 사용

요소에 추가 클래스를 추가하려면 :

요소의 모든 클래스를 변경하려면 :

'development' 카테고리의 다른 글

'development'의 다른글

관련글

티스토리툴바