javascript로 css class 내용 바꾸기

기본 형식의 clss내용 바꾸기는 className으로 처리한다.

javascript를 통해서, css의 class의 내용을 변경하는 방법입니다.

document.getElementById('tab1').className = "ewu tabBtn tabOn";

javascript를 통해서, style.disply처리

document.getElementById('table1').style.display = "block";

document.getElementById('table2').style.display = "none";

CSS 클래스 addClass 처리하기

출처: 

[자바스크립트] jquery 없이 DOM의 CSS 클래스 addClass, toggleClass, removeClass 구현하기

addClass 처리

: css 클래스를 추가하는 함수로, element와 class명을 받도록 한다.

1 2 3

function addClass(element, className) {     element.className += " " + className; };

removeClass 처리

: css 클래스를 제거하는 함수로, element와 class명을 받도록 한다. removeClass 함수의 경우는 addClass와는 조금 다르게 className이 중간에 있을수도 있으므로 그러한 것들을 고려해야한다. RegExp로 구현한다면 쉽게 구현이 가능하다.

1 2 3 4

function removeClass(element, className) {     var check = new RegExp("(\\s|^)" + className + "(\\s|$)");     element.className = element.className.replace(check, " ").trim(); };

: 위의 RegExp를 설명한다면, 일단 className은 앞에 공백(\\s)이나 문자열의 시작(^)이 오고, className의 뒤에는 또 공백(\\s)이나 파일의 끝($)이 오는 것을 감지하여 그 부분을 " " 공백으로 바꿔주고, 맨 앞이나 뒤였다면 공백을 없애주는 trim() 함수를 호출하는 것이다. 단순히 replace(className)으로 안하는 것은 예를 들면 현재 className이 "hamburger ham" 인 경우 replace(ham)만 쓰게 되면 앞있는 hamburger의 ham이 삭제 됨으로써 "burger ham" 이 될 수 있는 위험성이 있기 때문이다. 이는 "on" 등과 같은 클래스를 remove할 때에 더욱더 조심해야한다. 맨 뒤에 trim을 해주는 것은 빈 공백 " "으로 바꿔줬기 때문에 만약 맨뒤나 맨 앞에 있는 경우 계속 추가/삭제를 해서 공백이 늘어나는 것을 방지하기 위함이다.

toggleClass 처리

: css 클래스가 있으면 켜주고 없으면 추가하는 함수로, element와 className을 인자로 받는다. toggleClass의 경우 위의 두 함수를 사용할수도 있지만 어짜피 removeClass와 같은 RegExp를 하나 사용해야하는데다 간단하므로 위의 함수들을 굳이 안쓰고 그냥 구현해도 그다지 길어지지 않는다.

1 2 3 4 5 6 7 8

function toggleClass(element, className) {     var check = new RegExp("(\\s|^)" + className + "(\\s|$)");     if (check.test(element.className) {         element.className = element.className.replace(check, " ").trim();     } else {         element.className += " " + className;     } }