prototype.js에서 setStyle() 사용하기

Prototype Framework에서는 Element에 css가 아닌 자바스크립트로 스타일을 적용할 수 있게 하는 setStyle()이라는 메서드를 제공하고 있다. 물론 Element.style.display 같은 식으로 스타일에 접근하거나 할 수 있지만 setStyle()의 좋은 점은 css에서 적용하는 것처럼 스타일을 한꺼번에 적용할 수 있다.

Element의 Selector는 당연히 이것저것 있지만 가장 기본적인 getElementById를 가지고 설명하자.

(Language : javascript)

1. $("elementID").setStyle({
2.     'position': 'relative',
3.     'width':    '100px',
4.     'height':     '100px',
5.     'overflow': 'hidden',
6.     'border':   'solid 1px #808080'
7. });

마치 CSS를 사용한 것처럼 익숙한 스타일로 한꺼번에 스타일을 적용할 수 있다. px를 사용할 때 100px처럼 붙혀서 쓰는 것이 좋다. px앞에 공백이 있으면 브라우저에 따라 안 먹을 수 있다.

스타일 프로퍼티쪽은 꼭 홑따옴표(')로 묶어주지 않아도 상관없기는 하지만 float처럼 reserved word와 겹치는 경우에는 문제가 생길 수 있기 때문에 이런 충돌은 홑따옴표로 묶어서 해결할 수 있다.

근데 setStyle()을 사용할 때 주의할 점은 -가 붙는 CSS 프로퍼티에 대한 부분이다.

CSS에서도 내부 스타일과 외부 <style>태그로 할때 프로퍼티의 이름이 다른 경우들이 좀 있는데 그것처럼 여기서도 주의해야 할 부분이 있다.

background-color 이나 font-size처럼 CSS 프로퍼티가 - 가 붙는 경우에는 backgroundColor 나 fontSize 처럼 카멜방식으로 - 가 없이 작성해 주어야 동작을 한다. 모든 - 가 붙는 프로퍼티가 다 그런지 까지는 확인하지 못했지만 위의 2가지는 확실히 - 없이 작성해 주어야 한다. 대소문자를 가리기 때문에 반드시 위와같은 카멜방식이어야 한다.

이것때문에 한참 해맸다. 처음에는 동적으로 생성한 엘리먼트에는 setStyle이 안 먹나 해서 이것저것 했었는데 결국 스타일이 적용 안된게 저 문제 때문이었다.


덧) 각 스타일은 콤마(,)를 이용해서 구분하는데 마지막에도 콤마를 붙혀주는 실수를 할 경우 Firefox에서는 잘 돌아가지만 IE에서는(내 경우는 7) 에러가 난다. 더군다나 콤마때문에 렌더링 오류가 나는데 생뚱맞은 곳에서 오류메시지가 나기 때문에 디버깅 하기도 쉽지 않다. 콤마에 주의!!

덧) (2008.3.6) CSS의 프로퍼티를 -를 쓰지 않고 대신 카멜방식처럼 대문자로 이어붙히는 것은 자바스크립트 자체의 특징으로 특정 프로퍼티에 대시(-)를 사용할 수 없게 되어있다고 한다. 프로토타입의 특징은 아니었다.

[출처] http://blog.outsider.ne.kr/114