attr()을 이용하여 해당 속성을 변경할 수도 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>속성 설정하기</title>
<script src="../../js/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$image = $("#target");
$image.click(function(){
if($image.attr("src") == "ch1.png"){
$image.attr("src", "ch2.png");
} else{
$image.attr("src", "ch1.png");
}
});
});
</script>
</head>
<body>
<div class="panel">
<img src="ch1.png" id="target">
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>attr write example</title>
<script src="../../js/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$image = $(".target");
$image.click(function(){
if($image.attr("src") == "ch1.png"){
$image.attr("src", "ch2.png");
} else{
$image.attr("src", "ch1.png");
}
});
});
</script>
</head>
<body>
<div class="panel1">
<p>테스트 1</p>
<img src="ch1.png" class="target">
</div>
<div class="panel2">
<p>테스트 2</p>
<img src="ch1.png" class="target">
</div>
<div class="panel3">
<p>테스트 3</p>
<img src="ch1.png" class="target">
</div>
</body>
</html>
728x90
반응형
'HTML > Javascript 기초' 카테고리의 다른 글
| [Javascript] 이벤트 흐름 (0) | 2020.08.05 |
|---|---|
| [Javascript] 메뉴 페이지 만들기 실습 (feat. Javascript, jQuery) (0) | 2020.08.05 |
| [Javascript] 속성 읽어오기 (0) | 2020.08.04 |
| [Javascript/jQuery] 해당 스타일 읽어오기(feat. 자바스크립트, jQuery) (0) | 2020.08.04 |
| [Javascript] 자바스크립트 date 클래스 사용하기 (0) | 2020.07.31 |
