700===Dev Project/자바스크립트 놀기
자바스크립트 color toggle
블로글러
2019. 1. 15. 11:01
백그라운드 색깔 변경하기--> 나중에 더 이미지 또는 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