안녕하세요 오늘은 jquery를 이용하여 클릭할때마다 화면이 바뀌는 상황을 연출해볼게요.
매우 간단한 코드이니 설명은 주석으로 대체합니다.
<!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>Document</title>
<style>
#my-div{
width: 100px;
height: 100px;
background-color:pink;
}
</style>
<script src="./js/jquery.min.js"></script>
<script>
function myFunc(){//클릭시 작동되는 함수
$("#my-div").css({//id my-div를 지정
"width":"+=50px",//클릭시 원래 width값에 50px를 더함
"height":"+=50px"//클릭시 원래 height값에 50px를 더함
})
}
</script>
</head>
<body>
<div id="my-div">
내 div
</div>
<button onClick="myFunc()">클릭</button>
</body>
</html>
'IT > 프론트엔드' 카테고리의 다른 글
| [React]JSX와 JSX문법 이해하기 ep.01 (0) | 2023.07.05 |
|---|---|
| [React] 리액트 시작하기, 설치하기 ep.00 (0) | 2023.07.05 |
| [React]크롬 도구를 활용해서 개발자도구에서 리액트 쉽게 확인하기 (0) | 2023.03.14 |
| [jquery기초]jquery적용법(src,download) (0) | 2023.01.13 |
| [JavaScript]라이브러리 모음,사용법 (0) | 2022.12.29 |