jQuery, 그리고 객체를 사용해보자
이제 jQuery를 배워봅시다
폰트와 링크, 배경색 제어하기
index.html
<!DOCTYPE html>
<html>
<head>
<title>WEB1 - Welcome</title>
<meta charset="utf-8">
<!-- jQuery를 부릅니다 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- 분리시켜놓은 js 파일을 부릅니다 -->
<script src="colors.js"></script>
</head>
<body>
<h1><a href="index.html">WEB</a></h1>
<!-- 다크모드로 변경할 수 있는 버튼을 만들어 봅니다
input 태그를 생성합니다 버튼 타입을 주고 우선 night라고 표기되도록 합니다
클릭으로 작동합니다.
-->
<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>WEB</h2>
<p>웹의 세계에 오신것을 환영합니다.
</p>
</body>
</html>script.js
/*
개인 취향으로 홑따옴표 사용으로 통일
*/
/* a태그를 제어하기 위한 객체를 만듭니다
이 객체 안에는 css를 제어할 함수가 있습니다
*/
const link = {
setColor:function(color){
$('a').css('color', color);
}
}
const body = {
setColor:function(color){
$('body').css('color', color);
},
setBackgroundColor: function(color){
$('body').css('backgroundColor', color);
}
}
/* 이제 위에서 만든 객체를 활용하여
다크모드 기능을 가진 함수를 만들어봅시다
*/
function nightDayHandler(self){
if ( self.value === 'night'){
link.setColor('powderblue');
body.setColor('white');
body.setBackgroundColor('black');
self.value = 'day';
}else {
link.setColor('blue');
body.setBackgroundColor('white');
body.setColor('black');
self.value = 'night';
}
}Last updated