메뉴 보이기
Profile
이온디

2013.02.22

Script

자바스크립트로 CSS 불러오기

조회 수 4522 추천 수 0
출처 및 URL http://kin.naver.com/qna/detail.nhn?d1id...BcAAA80J50 
소스 index.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css" />
<script language="JavaScript" type="text/javascript">
function loadcssfile(filename)
{
var fileref = document.createElement("link");
fileref.rel = "stylesheet";
fileref.type = "text/css";
fileref.href = filename;
document.getElementsByTagName("head")[0].appendChild(fileref)
}
</script>
</head>
<body>
<div class="large">
This is a DIV sample.
</div>
<div class="small">
This is a DIV sample.
</div>
<input type="button" value="large" onclick="loadcssfile('cssfile1.css');" />
<input type="button" value="small" onclick="loadcssfile('cssfile2.css');" />
</body>
</html>

main.css
div {
width: 75px;
height: 125px;
background-color: green;
font-size: 10pt;
}

cssfile1.css
.large {
width: 75px;
height: 125px;
background-color: yellow;
font-size: 20pt;
}

cssfile2.css
.small {
width: 75px;
height: 125px;
background-color: red;
font-size: 1pt;
}index.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css" />
<script language="JavaScript" type="text/javascript">
function loadcssfile(filename)
{
var fileref = document.createElement("link");
fileref.rel = "stylesheet";
fileref.type = "text/css";
fileref.href = filename;
document.getElementsByTagName("head")[0].appendChild(fileref)
}
</script>
</head>
<body>
<div class="large">
This is a DIV sample.
</div>
<div class="small">
This is a DIV sample.
</div>
<input type="button" value="large" onclick="loadcssfile('cssfile1.css');" />
<input type="button" value="small" onclick="loadcssfile('cssfile2.css');" />
</body>
</html>

main.css
div {
width: 75px;
height: 125px;
background-color: green;
font-size: 10pt;
}

cssfile1.css
.large {
width: 75px;
height: 125px;
background-color: yellow;
font-size: 20pt;
}

cssfile2.css
.small {
width: 75px;
height: 125px;
background-color: red;
font-size: 1pt;

자바스크립트를 활용하여 여러 개의 CSS를 버튼으로 불러오는 소스입니다.

단점은 불러온데 또 불러온다는 거네요. 여러 번 사용하면 겹쳐지게 됩니다.

한번에 하나, 이렇게는 어떻게 하는건지..

ps. 네이버 지식인 timberx 님 감사합니다 

http://kin.naver.com/userinfo/answerList.nhn?userId=timberx

Profile
7
Lv
이온디

이온디 홈페이지는 간결하며,

 손쉽게 수정할 수 있습니다.

0개의 댓글

에디터
번호 제목 날짜 조회 수
공지 [웹표준] 코딩 배울 수 있는 사이트 모음(HTML/CSS/JS/IMG/PHP) 2018.01.03 99
공지 [jQuery] jQuery를 배울수 있는 동네들입니다. 2013.08.09 19176
공지 [미분류] 관련 링크 2010.05.23 33743
139 [jQuery] 왼쪽에 숨겨진 레이어를 보여주자 2013.08.09 4251
138 [Script] 전체화면 레이어 팝업 소스 2013.08.09 12007
137 [웹폰트] Daum font로 Google Font API 따라잡기 2013.08.09 4050
136 [Script] News Ticker - 한줄 전광판, 한줄씩 올라가는 스크립트, 뉴스티커 2013.08.07 5733
135 [웹폰트] 구글 웹폰트 서비스 이용하기 2013.08.06 4522
134 [웹접근성] 웹 접근성 이슈 2013.08.06 5118
133 [HTML5] IE보완 - 조건부 주석 2013.08.06 4850
132 [웹접근성] 웹접근성이란 2013.08.06 3842
131 [HTML5] img style 속성 2013.03.12 5894
130 [Meta] Meta Tag(메타태그) 사용법 2013.03.05 6850
129 [부트스트랩] #2 부트스트랩의 특징 1 2013.03.04 5645
128 [부트스트랩] #1 부트스트랩이란? 2013.03.01 4089
127 [HTML5] HTML5 시멘틱 구조 태그 2013.02.28 4667
126 [부트스트랩] 부트스트랩의 아이콘 지원 브라우저 2013.02.25 3695
125 [부트스트랩] 기본 부트스트랩 템플릿 2013.02.24 4026
124 [PHP] 쿠키를 굽자 2013.02.22 3519
[Script] 자바스크립트로 CSS 불러오기 2013.02.22 4522
122 [UI] jquery menu slide 2012.12.16 9008
121 [Script] 로그인창 띄우기 2012.12.14 4686