Javascript 를 이용해 동적으로 CSS 스타일 추가하기
자바스크립트를 이용해서 동적으로 스타일을 추가하는 방법입니다.
여기서 소개하는 방법은 DOM 객체 하나 하나에 스타일을 추가하는 것이 아니라, 규칙 자체를 head 안에 넣는 방법입니다.
<style>태그를 생성해 준다고 보면 되겠네요.
IE7,8,9,11 과 Chrome, Firefox, Safari 에서 테스트 해봤습니다.
<script type="text/javascript">
// add stylesheet
var sheet = document.createElement('style');
var sheet_str = "body {background-color:red; }";
var head = document.head || document.getElementsByTagName('head')[0];
sheet.type='text/css';
// for under ie9
if (sheet.styleSheet) {
sheet.styleSheet.cssText=sheet_str;
}
// for recently browsers(ie9 and over, chrome, firefox, safari etc...)
else {
sheet.appendChild(document.createTextNode(sheet_str));
}
head.appendChild(sheet);
</script>
[출처:http://stackoverflow.com/questions/524696/how-to-create-a-style-tag-with-javascript]
[원본 코드에서 약간의 수정이 가해졌습니다.]
위와 같은 형태로 <body> 태그 하단부에 작성해 주시면 됩니다.
볼드 처리된 부분을 보시면 아시겠지만, 위 스크립트를 실행하면 배경색을 빨갛게 만들어 줍니다.
규칙 자체를 추가하는 방법이기 때문에, 동적인 페이지에서 동적으로 스타일을 추가해야 하는 상황에서 사용하면 되겠지만, 쓸 일이 많이 없을지도 모르겠네요.