자바스크립트
자바스크립트로 스타일시트 변경하기
아마데우스
2008. 10. 22. 08:59
<![CDATA[<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<style>
#a {border:10 solid cyan;font-weight:blod;font-size:25px}
.b {background-color:#FF9999}
</style>
<SCRIPT LANGUAGE="JavaScript">
<!--
function modify_style(selector,property,value) {
var styleSheet = document.styleSheets;
var changed = false;
if(!styleSheet.length) {
var newStyle = document.createElement("style");
newStyle.type = "text/css";
document.getElementsByTagName("head")[0].appendChild(newStyle);
}
if(!property)
property = "cssText";
for(var i=0, style_len=styleSheet.length ; i<style_len ; i++) {
var rule = styleSheet[i].cssRules?styleSheet[i].cssRules:styleSheet[i].rules;
for(var j=0, rule_len=rule.length ; j<rule_len ; j++) {
if(rule[j].selectorText.toLowerCase() == selector.toLowerCase()) {
rule[j].style[property] = value;
changed = true;
}
}
}
if(!changed) {
var style = document.styleSheets[0];
if(property == "cssText")
var cssText = value;
else
var cssText = property + ":" + value;
if(style.insertRule)
style.insertRule(selector+"{"+cssText+"}",style.cssRules.length);
else if(style.addRule)
style.addRule(selector,cssText);
else return false;
}
}
//modify_style("#a","border","1px solid #fcc");
//modify_style(".b",0,"width:500px ; height:300px");
//-->
</SCRIPT>
</HEAD>
<BODY>
<A HREF="#1" id="a" class="b">이런기능은 언제 사용할라나..^^</A><br />
<br />
<INPUT TYPE="button" NAME="" value="modify_style('#a','border','1px solid #fcc');" onclick="modify_style('#a','border','1px solid #fcc');"><br />
<br />
<INPUT TYPE="button" NAME="" value="modify_style('.b',0,'width:500px ; height:300px');" onclick="modify_style('.b',0,'width:500px ; height:300px');">
</BODY>
</HTML>]]>
