백그라운드 색깔 변경하기--> 나중에 더 이미지 또는 css 배경 바꾸는데 응용할 수 있다.
color_toggle.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.purple{
background: purple;
}
</style>
</head>
<body>
<button>CLICK TO CHANGE COLOR</button>
<script type="text/javascript" src="toggle.js">
</script>
</body>
</html>
toggle.js
var button=document.querySelector("button");
var isPurple=false;
button.addEventListener("click", function(){
//방법 1 클래스 html에 등록하게 || 지우기
document.body.classList.toggle("purple");
/*
방법 2
if(isPurple){
document.body.style.background="red";
} else{
document.body.style.background="purple";
}
isPurple=!isPurple;
*/
});
728x90
'700===Dev Project > 자바스크립트 놀기' 카테고리의 다른 글
| JS TO-DO LIST ❄️ (0) | 2020.11.25 |
|---|---|
| 기본 AJAX 문법 (1) | 2019.01.16 |
| 1:1 게임 점수 기록 (0) | 2019.01.16 |
| AJAX로 JSON 데이터 가져오기 (1) | 2019.01.15 |