하얀 클릭 글자가 있는 빨간 정사각형을 클릭했을 때 검정색 정사각형이 나오게 만들어보다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>클릭</button>
<!-- jQuery 파일 불러오기 -->
<script src="./js/jquery-3.7.0.js"></script>
<script>
$("button").css("background-color", "red")
.css("font-size", "50px")
.css("font-weight", "bold")
.css("width", "200px")
.css("height", "200px")
.css("color", "white")
.css("border", "none")
.css("cursor", "pointer") // 클릭 가능 커서 모양
.on("click", () => {
$("button").css("background-color", "black")
.text("")
.css("width", "300px")
.css("height", "300px")
})
</script>
</body>
</html>
메소드 체인 방식으로 스타일을 적용했다. jQuery는 함수를 이어서 적용할 수 있기 때문에 스타일을 다 적용하고 on으로 클릭 이벤트를 걸어주었다. 클릭했을 때 바뀔 스타일을 함수 안에 넣었다.
'Front-End > 4. jQuery' 카테고리의 다른 글
| Ex06_animate.html (0) | 2023.06.22 |
|---|---|
| Ex05_jQuery추가삭제.html (0) | 2023.06.22 |
| Ex04_입력 요소.html (0) | 2023.06.21 |
| Ex03_jQuery_클래스변경.html (0) | 2023.06.21 |
| Ex01_jQuery.html (0) | 2023.06.21 |
