Overriding CSS dynamically using javascript

상황

- 본문 column 너비를 css class에 픽셀로 정해놓았는데 column 너비값을 컨텐츠(iframe으로 되어 있는 등)너비를 받아와서 동적으로 바꿔야 하는 상황

-> 해당 class의 width를 받아온 width로 overriding 하고 싶은 것이다.

 

.column { width: 700px; } /* 원래 있던 css 설정 */

.column { width: 1203px; } /* 받아온 컨텐츠 너비값을 가져다 이렇게 밑에 추가하고 싶다. */

 

var s;
for ( var i = 0; i < document.styleSheets.length; i++ ) {
  if ( document.styleSheets[i].href.indexOf('stylesheet.css') != -1 ) {

    s = document.styleSheets[i];

  }
}
i = (s.rules || s.cssRules).length;
if ( s.insertRule ) {
  s.insertRule('.column { width:'+width+'px; }', i);
} else {
  s.addRule('.column', 'width:'+width+'px;', i);
}