javascript - 추가 - 자바스크립트 classname




자바 스크립트로 요소의 클래스 변경 (17)

IE6 지원으로 바닐라 자바 ​​스크립트에서 요소의 클래스 변경

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>

JavaScript를 사용하여 onClick 이벤트에 대한 응답으로 HTML 요소의 클래스를 변경하려면 어떻게해야합니까?


클래스를 변경하기위한 최신 HTML5 기술

최신 브라우저에는 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 이전의 Internet Explorer에서는 작동하지 않지만 classList 에서 IE8 및 IE9에 대한 지원이 추가되었습니다. 그것은 점점 더 많이 supported 받고 있습니다.

간단한 크로스 브라우저 솔루션

요소를 선택하는 표준 JavaScript 방법은 document.getElementById("Id") 를 사용하는 것입니다.이 예제는 다음 예제에서 사용하는 것입니다. 물론 다른 방법으로 요소를 얻을 수 있지만 올바른 상황에서는 단순히 대신 this 코드를 사용할 수 있습니다. 이에 대한 자세한 내용은 해답의 범위를 벗어납니다.

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

모든 기존 클래스를 하나 이상의 새 클래스로 바꾸려면 className 특성을 설정합니다.

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

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

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

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

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

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

다른 잠재적 인 클래스에 영향을 미치지 않고 단일 클래스를 요소로 제거하려면 간단한 정규식 바꾸기가 필요합니다.

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

이 정규식에 대한 설명은 다음과 같습니다.

(?:^|\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 이벤트에 다음 작업 할당 :

HTML 이벤트 속성 (예 : onclick="this.className+=' MyClass'" ) 내에서 직접 JavaScript를 작성할 수는 있지만 권장되지는 않습니다. 특히 큰 응용 프로그램에서는 JavaScript 상호 작용 논리에서 HTML 마크 업을 분리하여 유지 보수가 가능한 코드를 얻을 수 있습니다.

이를 달성하기위한 첫 번째 단계는 함수를 작성하고 onclick 속성에서 함수를 호출하는 것입니다 (예 :

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

(이 코드는 스크립트 태그에 포함 할 필요가 없습니다. 간단히 예를 들어 설명하는 것이므로 JavaScript를 별개의 파일에 포함하는 것이 더 적절할 수 있습니다.)

두 번째 단계는 onclick 이벤트를 HTML에서 JavaScript로 이동하는 것입니다 (예 : 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>

(window.onload 부분은 HTML로드가 끝난 해당 함수의 내용이 실행되도록 요구됩니다.이 경우 JavaScript 코드가 호출 될 때 MyElement가 없어서 줄이 실패합니다.)


JavaScript 프레임 워크 및 라이브러리

위의 코드는 모두 표준 JavaScript에 있지만 프레임 워크 나 라이브러리를 사용하여 일반적인 작업을 단순화하고 코드를 작성할 때 생각지 못했던 고정 된 버그 및 엣지 케이스의 이점을 얻는 것이 일반적입니다.

어떤 사람들은 단순히 수업을 변경하기 위해 ~ 50KB의 프레임 워크를 추가하는 것이 과도하다고 생각하지만, 상당량의 JavaScript 작업을 수행하는 경우 또는 비정상적인 브라우저 간 동작이있는 경우 고려해야 할 가치가 있습니다.

(매우 대략적으로, 라이브러리는 특정 작업을 위해 설계된 도구 세트이며 일반적으로 프레임 워크에는 여러 라이브러리가 포함되어 있으며 완전한 직무를 수행합니다.)

위의 예제는 jQuery를 사용하여 재현되었습니다. 아마도 가장 많이 사용되는 JavaScript 라이브러리 일 것입니다.

( $ 는 jQuery 객체이다.)

jQuery로 클래스 변경하기 :

$('#MyElement').addClass('MyClass');

$('#MyElement').removeClass('MyClass');

if ( $('#MyElement').hasClass('MyClass') )

또한 jQuery는 클래스가 적용되지 않는 경우 클래스를 추가하거나 해당 클래스를 제거하는 바로 가기를 제공합니다.

$('#MyElement').toggleClass('MyClass');


jQuery를 사용하여 click 이벤트에 함수 지정 :

$('#MyElement').click(changeClass);

또는, ID가 필요없이 :

$(':button:contains(My Button)').click(changeClass);



jQuery를 사용하고 다음과 같이 작성한다.

jQuery(function($) {
    $("#some-element").click(function() {
        $(this).toggleClass("clicked");
    });
});

이 코드는 id some 요소의 요소 를 클릭 할 때 호출 할 함수를 추가합니다. 이 함수는 요소의 class 속성에 clicked 를 추가합니다 (아직 요소의 일부가 아닌 경우).

예,이 코드를 사용하려면 페이지의 jQuery 라이브러리에 대한 참조를 추가해야하지만 최소한 라이브러리의 대부분 기능이 모든 최신 브라우저에서 작동 할 것이라고 확신 할 수 있으며 구현 시간을 절약 할 수 있습니다. 같은 일을하는 자신 만의 코드.

감사


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

예를 들어, onclick에 일부 클래스를 추가하려면 버튼을 사용하면됩니다.

<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를 사용하는 것이 더 좋을 것입니다.


내가 이걸 던지 리라 생각 했어.

function inArray(val, ary){
  for(var i=0,l=ary.length; i<l; i++){
    if(ary[i] === val){
      return true;
    }
  }
  return false;
}
function removeClassName(classNameS, fromElement){
  var x = classNameS.split(/\s/), s = fromElement.className.split(/\s/), r = [];
  for(var i=0,l=s.length; i<l; i++){
    if(!iA(s[i], x))r.push(s[i]);
  }
  fromElement.className = r.join(' ');
}
function addClassName(classNameS, toElement){
  var s = toElement.className.split(/\s/);
  s.push(c); toElement.className = s.join(' ');
}

다른 기존 클래스를 유지할 필요가 없다면 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>


다음은 요소의 클래스를 토글 / 추가 / 제거하는 토글 클래스입니다.

// If newState is provided add/remove theClass accordingly, otherwise toggle theClass
function toggleClass(elem, theClass, newState) {
    var matchRegExp = new RegExp('(?:^|\\s)' + theClass + '(?!\\S)', 'g');
    var add=(arguments.length>2 ? newState : (elem.className.match(matchRegExp) == null));

    elem.className=elem.className.replace(matchRegExp, ''); // clear all
    if (add) elem.className += ' ' + theClass;
}

jsfiddle

또한 동적으로 새 클래스를 만드는 것에 대한 내 대답을 참조하십시오.


당신은 또한 할 수 있습니다 :

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

그리고 클래스를 토글 (다른 클래스가 있으면 제거) :

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

불쾌감은 없지만 CSS 인터프리터가 전체 웹 페이지의 시각적 표현을 다시 계산하도록 강요하므로 수업을 직접 변경하는 것이 좋습니다.

그 이유는 CSS 인터프리터가 상속이나 계단식을 변경할 수 있는지 여부를 알기가 거의 불가능하기 때문에 짧은 대답은 다음과 같습니다.

ClassName을 변경하지 마세요! -)

그러나 일반적으로 속성 하나 또는 두 개만 변경하면되므로 쉽게 구현할 수 있습니다.

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

순수한 자바 스크립트 코드 사용 :

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

여기에 간단한 jQuery 코드가있다.

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

이리,

  • Class1은 이벤트에 대한 리스너입니다.
  • 부모 클래스는 변경하려는 클래스를 호스트하는 클래스입니다.
  • Classtoremove는 당신이 가진 오래된 수업입니다.
  • 추가 할 클래스는 추가하려는 새 클래스입니다.
  • 100은 클래스가 변경되는 동안의 시간 초과 지연입니다.

행운을 빕니다.


와우, 거기에 너무 많은 잔인한 답변을 여기에 놀랐습니다 ...

<div class="firstClass" onclick="this.className='secondClass'">

이것은 나를 위해 일하고있다 :

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

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

이전 regexes에 대한 몇 가지 간단한 노트와 비틀기 :

클래스 목록에 클래스 이름이 두 번 이상있는 경우 전역 적으로 처리하려고 할 것입니다. 그리고 클래스 목록의 끝에서 공백을 제거하고 여러 공백을 하나의 공백으로 변환하여 공백을 유지하지 못하게 할 수 있습니다. 클래스 이름으로 딩크하는 유일한 코드가 아래의 정규식을 사용하고 추가하기 전에 이름을 제거하면 이러한 것들은 문제가 될 수 없습니다. 그러나. 글쎄, 누가 클래스 명단에 속아 넘어 질지 누가 알 겠어.

이 정규식은 대소 문자를 구별하므로 클래스 이름의 대소 문자를 신경 쓰지 않는 브라우저에서 코드를 사용하기 전에 클래스 이름의 버그가 표시 될 수 있습니다.

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, ' ') + "]");

좋아,이 경우에는 jQuery를 사용하거나 순수 자바 스크립트로 직접 메서드를 작성해야한다고 생각한다. 다른 이유로 인해 필요하지 않으면 내 jQuery를 내 응용 프로그램에 삽입하는 대신 내 자신의 메서드를 추가한다.

클래스를 삭제, 클래스를 삭제 처리하는 몇 가지 기능을 추가하려면 javascript 프레임 워크에 메서드로 아래처럼 뭔가를하고 싶습니다 jQuery,이 완전히 IE9 +에서 또한 지원됩니다, 내 코드는 ES6 작성된, 그래서 당신이 필요합니다. 당신의 브라우저가 그것을 지원하는지 또는 babel과 같은 것을 사용하고 있는지 확인하려면, 코드에서 ES5 문법을 사용해야합니다. 이렇게하면 ID를 통해 요소를 찾습니다. 즉 요소에 ID를 선택해야합니다.

//simple javascript utils for class management in ES6
var classUtil = {

  addClass: (id, cl) => {
    document.getElementById(id).classList.add(cl);
  },

  removeClass: (id, cl) => {
    document.getElementById(id).classList.remove(cl);
  },

  hasClass: (id, cl) => {
    return document.getElementById(id).classList.contains(cl);
  },

  toggleClass: (id, cl) => {
    document.getElementById(id).classList.toggle(cl);
  }

}

그리고 당신은 단순히 아래처럼 그들을 사용하여 호출 할 수 있습니다, 당신의 요소가 'id'와 클래스 '클래스'의 클래스를 상상해, 당신이 문자열로 전달되었는지 확인, 당신은 아래와 같이 util을 사용할 수 있습니다 :

classUtil.addClass('myId', 'myClass');
classUtil.removeClass('myId', 'myClass');
classUtil.hasClass('myId', 'myClass');
classUtil.toggleClass('myId', 'myClass');

클래스 추가, 제거, 토글 및 검사 ( gist ) 메소드를 추가하기 위해 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 입니다.


node.className 과 같이 사용할 수 있습니다.

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

IE5.5 이상에서는 PPK 에 따라 작동합니다.





dom