3.html (파일로 쪼개서 정리 정돈하기)
colors.js
3.html
3.html 최종
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WEB2 - JavaScript</title>
</head>
<script src="colors.js"></script>
<body>
<h1><a href="index.html">WEB</a></h1>
<input id="night_day" type="button" value="night" onclick="
nightDayHandler(this);
">
<ol>
<li><a href="1.html">HTML</a></li>
<li><a href="2.html">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</ol>
<h2>JavaScript</h2>
<p>대충 위키피디아 내용</p>
</body>
</html>colors.js 최종
var Links = {
setColor:function(color){
var alist = document.querySelectorAll('a');
var i = 0;
while(i < alist.length){
alist[i].style.color = color;
i = i + 1;
}
}
}
var Body = {
setColor:function(color){
document.querySelector('body').style.color = color;
},
setBackgroundColor:function (color){
document.querySelector('body').style.backgroundColor = color;
}
}
function nightDayHandler(self){
var target = document.querySelector('body');
if(self.value === 'night') {
Body.setBackgroundColor('black');
Body.setColor('white');
self.value = 'day';
Links.setColor('powderblue');
} else {
Body.setBackgroundColor('white');
Body.setColor('black');
self.value = 'night';
Links.setColor('blue');
}
}출처
반응형
'개발(Web) > Web' 카테고리의 다른 글
| [Spring/STS] 스프링 설치 (1) (0) | 2020.10.21 |
|---|---|
| [Eclipse] The superclass "javax.servlet.http.HttpServlet" was not found on the Java Build Path (0) | 2020.08.03 |
| [JavaScript] 생활코딩 WEB2 JavaScript 29~33강 (0) | 2020.07.20 |
| [JavaScript] 생활코딩 WEB2 JavaScript 24~28강 (0) | 2020.07.19 |
| [JavaScript] 생활코딩 WEB2 JavaScript 19~23강 (0) | 2020.07.19 |