className 의 동적 적용

[yser]

혼자서 한참 삽질하다가 한계를 느껴서 질문 올립니다.

Code: Select all

.foo
{
   border: 1px solid red !important;
}

.bar
{
   border: 1px solid black;
   background: silver;
}


<div id='blah' class='bar'>blah blah..</div>

<script>
function tmp()
{
   document.getElementById('blah').className = 'foo';
}
</script>

위와 같은 코드가 있을 때, 저는 blah 요소의 class 를 bar 에서 foo 로 동적으로 변경해 주려고 하는데, 저렇게 했을 경우 bar 의 배경색까지 무시되어 버립니다. 저는 다만 foo 의 border 만 영향을 끼쳐주고 싶거든요.. 그러면 foo 에도 같은 배경색을 설정해주면 되지 않느냐 하실지도 모르지만, 저건 하나의 예제일 뿐이고 사실 이전의 class 에 지정된 나머지 속성은 뭔지 모르는 상태에서 foo 의 새로운 속성만 덮어쓰고 싶습니다. 그래서 저런 방식은 안될 거 같고, className 의 값을 컬렉션 형태로던가 뭐 그런게 필요할 거 같은데.. 로직상 막혀 버렸습니다. ㅡㅜ

뭔가 깔끔한 방법 없을까요.. combine css 형태로 공백을 줘서 덧붙이는 것도 생각해 보았는데, foo 와 bar 가 번갈아 가면서 토글 형식으로 바뀌는 걸 하려했더니 그것도 난감합니다.

[hyeonseok]

이건 어떠세요?

.set-bg {
background: silver;
}

.foo
{
border: 1px solid red !important;
}

.bar
{
border: 1px solid black;
}

<div id='blah' class='set-bg bar'>blah blah..</div>

<script>
function tmp()
{
document.getElementById('blah').className = 'set-bg foo';
}
function removeTmp()
{
document.getElementById('blah').className.replace(' foo', '');
}
</script>

[yser]

공통 분모를 따로 빼서 css 에 정의하고, 바뀌는 부분만 따로 해준 것이군요..
그 방법을 적용하려다 보니, css 가 점점 불어나네요.. --;
사실 저 방식은 제가 만드는 프로그램에서 스킨 부분에서 css 정의에 따라 필수로 적어야 할 필드가 빠져있으면 그 부분만 토글로 깜빡거리게 처리할려고 했거든요.

혼자서만 쓸게 아니라서 일반인 입장에서도 css 편집에 큰 부담이 안가는 쪽으로 하려고 했는데, 현석님의 방식으로 하려면 쪼개어야 하는 부담이 좀 있군요.. 어떻게 className 의 내용을 동적으로 바로 다른 요소에 덮어쓰는 방법은 없을려나요 -_-

.foo .bar 두 개가 있을 때 .bar 의 border 만 .foo 에 덮어쓴다던지....
음 너무 이상한 부분까지 다 제어하려고 드니 코드가 점점 꼬여가는군요.

[goodmonster]

Code: Select all

<script>
function tmp1()
{
   document.getElementById('blah').className =       document.getElementById('blah').className + ' foo';
}
</script>

원래 스타일에 새로운 스타일을 추가하는 식으로 하면 되지 않을까요?

[yser]

현재는 현석님이 제시한 방법과 비슷하게 구현을 했습니다.
구현은 되는데 좀 뭔가 깔끔해보이지 못한 단점이 있는데요..
그래도 이 이상 하려니 css rule 이라던지 dom model 2 의 요상한 게 있긴 있더군요. 그거 써보려고 했더니, 아니나다를까 브라우저 호환성 문제가 있어서 그냥 쓰기로 했습니다.

w3c dom model 2 문서가 늦게 발표된건지 어쩐건지 하여튼 마소는 익스 5.5 (또는 5.0) 에서 없던 스펙을 자기들 나름대로 구현을 해버렸기에 css 조작이라던가 하는 dom2 부분도 파폭이랑 익스가 계층 접근이 다르더군요. -_-;; 속 편하게 그냥 기존의 방식으로 해결하는 게 나을 듯..

goodmonster 님이 제시하신 방식은 추가할 땐 문제가 안되는데, 그걸 토글 형식으로 두 개가 번갈아 가면서 바뀌어야 할 때 따로 또 체크를 해주어야 합니다. 토글만 아니면 아무런 문제가 없는데, 애시당초 구현하는 기능에 토글이 필요했던지라.. ^^;