728x90
반응형
html 마크업
#wrap article css 편집
자바스크립트로 박스안에 아쿠아색 클릭했을 때 핑크로 변경하기
변수 지정
아쿠아를 클릭하면 핑크로 변경된다.
<script>
// 변수 지정
const wrap = document.querySelector("#wrap")
const box = document.querySelector("article")
wrap.addEventListener("click",()=>{
box.style.backgroundColor = "pink";
});
</script>addClass = classList >> 클래스를 추가한다.
click하면 "on"이 발생하도록한다.
wrap.addEventListener("click",()=>{
wrap.classList.add("on");
});
클래스가 없기 때문에 false가 뜬다.
wrap.addEventListener("click",()=>{
wrap.classList.add("on");
let isOn = wrap.classList.contains("on");
console.log(isOn);
});
클래스를 추가하면 true가 된다.
if문을 이용해서 자바스크립트에서 toggle키 만들기
wrap.addEventListener("click",()=>{
let isOn = wrap.classList.contains("on");
// if문 >> toggle key 자바스크립트로 만들었다.
if(isOn){
wrap.classList.remove("on");
}else{
wrap.classList.add("on");
}
});● classList.toggle: 토글 키
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>클래스 제어하기</title>
<style>
#wrap{
width: 500px;
height: 500px;
border: 1px solid #000;
padding: 100px;
box-sizing: border-box;
margin: 100px auto;
}
#wrap article{
width: 100%;
height: 100%;
background-color: aqua;
transition: all 0.5s;
}
#wrap.on article{
background-color: pink;
}
</style>
</head>
<body>
<section id="wrap">
<article></article>
</section>
<script>
// 변수 지정
const wrap = document.querySelector("#wrap")
const box = document.querySelector("article")
wrap/addEventListener("click",()=>{
wrap.classList.toggle("on");
});
// wrap.addEventListener("click",()=>{
// let isOn = wrap.classList.contains("on");
// if문 >> toggle key 자바스크립트로 만들었다.
// if(isOn){
// wrap.classList.remove("on");
// }else{
// wrap.classList.add("on");
// }
// });
// wrap.addEventListener("click",()=>{
// wrap.classList.add("on");
// let isOn = wrap.classList.contains("on");
// console.log(isOn);
// });
// wrap.addEventListener("click",()=>{
// wrap.classList.add("on");
// });
// 클릭이벤트
// wrap.addEventListener("click",()=>{
// box.style.backgroundColor = "pink";
// });
</script>
</body>
</html>728x90
반응형
'☭DEVELOPER > #2 웹개발(자바기반 풀스택)' 카테고리의 다른 글
| 비주얼 스튜디오 코드 56_ 반응형 메뉴(모바일 네비게이션) (0) | 2023.06.30 |
|---|---|
| 비주얼 스튜디오 코드 55_ parallax04 (0) | 2023.06.29 |
| 비주얼 스튜디오 코드 54_자식 요소의 순서를 지정하자 (0) | 2023.06.29 |
| 비주얼 스튜디오 코드 53_parallax03 (2) | 2023.06.28 |
| 비주얼 스튜디오 코드 52_웹 표준)갤러리 이미지 넣기 (0) | 2023.06.28 |