[js] html에 class 추가/제거 하는 토글 버튼

2016-01-05

김 태영

<script>
function sidebar_toggle() {
	var root = document.documentElement;
	if (~root.className.indexOf(' selector')) {
		root.className = root.className.replace(' selector', '');
	} else {
		root.className += ' selector';
	};
};
</script>

<span onclick="sidebar_toggle();">Toggle</span>

var root 의 document.documentElement 는 <html> 엘리먼트를 의미한다.
if 문을 돌려 만약에 root 에 selector 라는 class 가 있으면 그 클래시를 지워주고 없으면 selector 라는 class 를 추가해준다.
ex) <html> -> <html class=" selector">

selector 앞이 한칸 띄워져 있는 이유는, 띄어쓰기가 없을 경우 기존의 class 와 딱 붙어버리게 되기 때문이다.
ex) <html class="default"> -> <html class="defaultselector">

간단하게 쓸 수 있어 종종 사용하는 스크립트이다.

addClass className indexOf replaceClass