자바스트립트에서 css에 접근하려면 style로 접근해야한다.
마우스를 누르면(mouseup) 노란색, 마우스를 떼면(mousedown) 흰색으로 작동되는 코드이다.
document.querySelector("#myDiv").style.backgroundColor = "white";
이런식으로 css에 접근하면된다.
<!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>Step02_event2.html</title>
<style>
.box{
width: 500px;
height: 500px;
border-width:1px;
border-style:solid;
border-color:red;
}
</style>
</head>
<body>
<div class="box" id="myDiv">div1</div>
<script>
document.querySelector("#myDiv").addEventListener("mousedown",function(){
document.querySelector("#myDiv").style.backgroundColor = "yellow";
});
// id 가 myDiv인 요소에 "mouseup"이벤트가 일어나면 배경색을 흰색으로 바꿔 보세요.
document.querySelector("#myDiv").addEventListener("mouseup",function(){
document.querySelector("#myDiv").style.backgroundColor = "white";
});
</script>
</body>
</html>
'WEB' 카테고리의 다른 글
| [JavaScript] 전역변수(Global) / 지역변수(Local) (0) | 2021.10.13 |
|---|---|
| [HTML] select / option (0) | 2021.10.12 |
| [HTML] 자동 완성 기능 / VScode / emmet (0) | 2021.10.12 |
| [JavaScript] 반복문 (0) | 2021.10.12 |
| [JavaScript] 마우스 x,y 좌표값 구하기 / client / offset / screen (0) | 2021.10.12 |
