Front/jQuery
jQuery - DOM 요소의 속성 추가 및 삭제
by Hyeon_
2021. 12. 15.
DOM 요소의 속성 추가 및 삭제
attr('속성명', 값) : 속성 추가removeAttr('속성명') : 속성 제거
DOMattr.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<script src="js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#img')
.on('mouseover', function(){
$(this).attr('src', 'image/apple.png');
})
.on('mouseout', function(){
$(this).attr('src', 'image/heart.png');
})
});
</script>
</head>
<body>
<h1>DOM 요소 속성 추가</h1>
<img src="image/heart.png" id="img">
</body>
</html>
연습문제
DOMattrIndex.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<style type="text/css">
div {margin: 0 auto; width: 1000px;}
img {width:200px; height: 100px;}
</style>
<script src="js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// (1) <img> 태그를 선택해서 (객체 변수 생성 생략하고 바로 선택자를 객체로 사용)
// var $img = $('img'); 해서 배열 객체 생성해도 되고
// 바로 선택자로 each() 메소드 앞에 적어도 됨 : $('img').each()
// <img> 4개 : 배열로 객체 생성
// (2) 각 이미지에 마우스 올렸다 뗐을 떄 처리 : 각각을 처리해야 하므로 each() 사용
// each()에는 기본 파라미터 index가 포함되어 있음.
// 마우스 올렸다 뗐을 때 처리하는 메소드로 hover() 사용
$('img').each(function(index) {
$(this).hover(
function() { // 마우스 올렸을 때 호출되는 함수
// 이미지 변경 : <img> 태그의 src 속성값을 변경 : attr() 메소드 사용
$(this).attr('src', 'image/img2-' +(index + 1)+ '.jpg');
},
function() {// 마우스 땠을 때 호출되는 함수
$(this).attr('src', 'image/img1-' +(index + 1)+ '.jpg');
}); // hover 종료
}); // each() 종료
});
</script>
</head>
<body>
<img src="image/img1-1.jpg"><img src="image/img1-2.jpg"><img src="image/img1-3.jpg"><img src="image/img1-4.jpg">
</body>
</html>
DOM 요소의 클래스 속성
CSS 효과 동적 적용
- CSS의 클래스 선택자에 적용된 여러 효과를 동적으로 추가하거나 제거
addClass('클래스명') : CSS 효과 적용removeClass('클래스명') : 적용된 CSS 효과 제거(해제)toggleClass('클래스명') 사용
addClass()와 removeClass()를 번갈아 가면서 실행하는 결과
DOMaddClass.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<style type="text/css">
* {text-align: center;}
.h1Css{
background-color: gold;
color: blue;
}
.imgCss{
opacity: 0.5;
box-shadow: 5px 5px 10px 1px #777777;
}
.hidden{visibility: hidden;}
</style>
<script src="js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('img')
.on('mouseover', function() {
$(this).addClass('imgClass');
$('h1').text("여러 CSS 효과 동적으로 적용");
$('h1').addClass('h1Css');
})
.on('mouseout', function() {
$(this).removeClass('imgClass');
$('h1').text("이미지에 마우스를 올려보세요");
$('h1').removeClass('h1Css');
});
// [toggleClass]버튼 클릭 시 addClass()와 removeClass()가 작동하도록
$('#toggle').on('click', function(){
$('img').toggleClass('hidden'); // hidden 클래스 효과
});
});
</script>
</head>
<body>
<div id="wrap">
<h1>이미지에 마우스를 올려보세요</h1>
<img src="image/painting.jpg"> <br><br>
<button id="toggle">toggleClass</button>
</div>
</body>
</html>