JSPRO1/JS 전체 HTML 페이지 스타일 (스키닝) .html을 동적으로 수정하십시오
코드 사본은 다음과 같습니다.
<! doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<헤드>
<meta http-equiv = "content-type"content = "text/html; charset = utf-8"/>
<title> 동적 페이지 스타일 </title>
<link href = "css/blue.css"rel = "스타일 시트"id = "mylink"/>
<script type = "text/javaScript">
기능 젤 (ID) {
return document.getElementById (id);
}
Window.onload = function () {
// CSS 파일을 교체합니다
var lis = gel ( "ulist"). childnodes;
for (var i = 0; i <lis.length; i ++) {
if (lis [i] .nodeType == 1) {
lis [i] .onclick = function () {
젤 ( "mylink"). href = "css/" + this.classname + ".css";
};
}
}
};
</스크립트>
</head>
<body>
<div>
<span> 전체 페이지의 스타일을 수정 </span> <br/>
<입력 유형 = "text"id = "txt"/>
<입력 유형 = "버튼"value = "제출"/>
</div>
<ul id = "ulist"style = "텍스트 설명 : 없음; 마진-탑 : 100px;">
<li style = "display : 블록; 너비 : 30px; 높이 : 20px; 배경색 : 빨간색;"> </li>
<li style = "디스플레이 : 블록; 너비 : 30px; 높이 : 20px; 배경색 : 파란색"> </li>
</ul>
</body>
</html>
jspro1/css/red.css
코드 사본은 다음과 같습니다.
* {
여백 : 0px; 패딩 : 0px;
}
몸 {
배경색 : #eeeeee;
}
기간 {
색상 : 빨간색;
}
#txt {
색상 : "테두리 : 1px 고체 #7d1515;
}
.btn {
배경색 : #a52a2a; 테두리 : 없음; 색상 : 흰색; 너비 : 100px; 높이 : 28px;
}
jspro1/css/blue.css
코드 사본은 다음과 같습니다.
* {
여백 : 0px; 패딩 : 0px;
}
몸 {
배경색 : #eeeeee;
}
기간 {
색상 : 파란색;
}
#txt {
색상 : #0000cd; 테두리 : 1px Solid #006400;
}
.btn {
배경색 : #0000cd; 테두리 : 없음; 색상 : 흰색; 너비 : 100px; 높이 : 28px;
}