Archive / Javascript / ClassName

html의 class속성과 같은 것이지만 DOM-level1에와서 className으로 변경되었다.

CSS 작업을 하다 보면 서버측에서 class 를 선택적으로 바꿔 주어야 하는 경우가 있다. 예를 들어서 첫번째에는 line 이 없어야 하기 때문에 별도의 class 를 적용한다든가 하는 것들이다. 이러한 것들을 서버 측에서 예외처리를 하여 적용할 수도 있지만, 적용되는 부분이 기능적인 것이 아닌 디자인 적인 요소이기 때문에 클라이언트 측에서 처리를 해줘도 충분하다.

첫번째 항목의 className을 바꾸는 함수

first-child가 작동하지 않는 브라우져 때문에 만든 함수

/* Add First Row Class */
function addFirstRowClass(elId, tagName, searchClass, addClass) {
	var el = document.getElementById(elId).getElementsByTagName(tagName);

	for (i=0; i<el.length; i++) {
		if (el[i].className == searchClass || el[i].className == searchClass + " on") {
			el[i].className = el[i].className + " " + addClass;
			return true;
		}
	}
}

짝수 줄의 className을 바꾸는 함수

게시판에 짝수 줄에만 컬러가 다른 경우에 사용하면 유용하다.

/* Add Even Row Class */
function addEvenRowClass(elId, tagName, searchClass, addClass) {
	var count = 0;
	var el = document.getElementById(elId).getElementsByTagName(tagName);

for (i=0; i<el.length; i++) {
		if (el[i].className == searchClass) {
			if (count%2) {
				el[i].className = el[i].className + " " + addClass;
			}
			count++;
		}
	}
}

Mouseover시에 className 바꾸기

게시판 같은 곳에서 mouse over 시에 배경 색을 바꾼다든가, 글씨 색을 바꾸는 동작을 줄때, 각 줄에 onmouseover 와 onmouseout 속성을 주어서 제어를 할 수 있다. 하지만 이럴경우 소스코드가 복잡해 지고 덩치가 커지게 된다. 또한 이러한 동작은 디자인적인 요소가 강하기 때문에 javascript 로 클라이언트 환경에서 처리를 해주는 것이 보다 효율적이다.

/* Change Over Row Class */
function changeOverRowClass(elId, tagName, searchClass) {
	var el = document.getElementById(elId).getElementsByTagName(tagName);

	for (i=0; i<el.length; i++) {
		if (el[i].className == searchClass || el[i].className == searchClass + " on") {
			el[i].onmouseover = changeOverRowClassOver;
			el[i].onmouseout = changeOverRowClassOut;
		}
	}
}
function changeOverRowClassOver() {
	if (this.className == "") {
		this.className = this.className + " on";
	} else {
		this.className = "on";
	}
}
function changeOverRowClassOut() {
	if (this.className == "on") {
		this.className = "";
	} else {
		this.className = this.className.replace(" on", "");
	}
}