jQuery 공작소 : .attr()
jQuery 공작소에 방문해 주셔서 감사드립니다. 쉬운 예제로 느껴보세요!!
attr 메서드는 요소의 속성값을 읽거나 씁니다.
이미지를 가지고 예제를 만들어 보았습니다.
예제 1
기본 예제 (이미지 주소 읽어오기)
보기
아래 그림을 눌러보세요.
소스
<style type="text/css">
.css_test {
text-align : center;
}
.css_test img {
cursor : pointer;
margin : 0 5px;
width : 40px;
}
</style>
<div class="css_test">
아래 그림을 눌러보세요.<br><br>
<img src="//superkts.com/img/css/com01.gif" onclick="j_test(this)" />
<img src="//superkts.com/img/css/com03.gif" onclick="j_test(this)" />
<img src="//superkts.com/img/css/com05.gif" onclick="j_test(this)" />
<img src="//superkts.com/img/css/com06.gif" onclick="j_test(this)" />
<img src="//superkts.com/img/css/com07.gif" onclick="j_test(this)" />
</div>
<script type="text/javascript">
function j_test(o){
alert( $(o).attr( 'src' ) ); // 클릭한 이미지의 주소를 경고창으로 !
}
</script>
.css_test {
text-align : center;
}
.css_test img {
cursor : pointer;
margin : 0 5px;
width : 40px;
}
</style>
<div class="css_test">
아래 그림을 눌러보세요.<br><br>
<img src="//superkts.com/img/css/com01.gif" onclick="j_test(this)" />
<img src="//superkts.com/img/css/com03.gif" onclick="j_test(this)" />
<img src="//superkts.com/img/css/com05.gif" onclick="j_test(this)" />
<img src="//superkts.com/img/css/com06.gif" onclick="j_test(this)" />
<img src="//superkts.com/img/css/com07.gif" onclick="j_test(this)" />
</div>
<script type="text/javascript">
function j_test(o){
alert( $(o).attr( 'src' ) ); // 클릭한 이미지의 주소를 경고창으로 !
}
</script>
관련 CSS
jQuery
- 클릭한 이미지 객체를 함수에 전달하여 경로를 경고창으로 띄우는 예제입니다.
attr( '속성명' )
$( 이미지 ).attr( 'src' ) - 이미지의 경로를 가져옵니다.
예제 2
이미지 주소 바꿔보기
보기
아래 버튼을 눌러보세요.
소스
<style type="text/css">
.css_test {
text-align : center;
}
</style>
<div class="css_test">
<img src="https://t1.daumcdn.net/cfile/tistory/233C4A3D552F50A00F" /><br>
아래 버튼을 눌러보세요.<br>
<button type="button" onclick="j_test('https://t1.daumcdn.net/cfile/tistory/223D2D4C550B9B3B0D')">사진 1</button>
<button type="button" onclick="j_test('https://t1.daumcdn.net/cfile/tistory/2264874654D5A16A32')">사진 2</button>
<button type="button" onclick="j_test('https://t1.daumcdn.net/cfile/tistory/2179074B550B9B360C')">사진 3</button>
<button type="button" onclick="j_test('https://t1.daumcdn.net/cfile/tistory/26138D4854D7351522')">사진 4</button>
<button type="button" onclick="j_test('https://t1.daumcdn.net/cfile/tistory/2439673854D74C4D39')">사진 5</button>
</div>
<script type="text/javascript">
function j_test(src){
$('.css_test img').attr('src', src); // 클릭한 버튼의 이미지 보여주기
}
</script>
.css_test {
text-align : center;
}
</style>
<div class="css_test">
<img src="https://t1.daumcdn.net/cfile/tistory/233C4A3D552F50A00F" /><br>
아래 버튼을 눌러보세요.<br>
<button type="button" onclick="j_test('https://t1.daumcdn.net/cfile/tistory/223D2D4C550B9B3B0D')">사진 1</button>
<button type="button" onclick="j_test('https://t1.daumcdn.net/cfile/tistory/2264874654D5A16A32')">사진 2</button>
<button type="button" onclick="j_test('https://t1.daumcdn.net/cfile/tistory/2179074B550B9B360C')">사진 3</button>
<button type="button" onclick="j_test('https://t1.daumcdn.net/cfile/tistory/26138D4854D7351522')">사진 4</button>
<button type="button" onclick="j_test('https://t1.daumcdn.net/cfile/tistory/2439673854D74C4D39')">사진 5</button>
</div>
<script type="text/javascript">
function j_test(src){
$('.css_test img').attr('src', src); // 클릭한 버튼의 이미지 보여주기
}
</script>
관련 CSS
jQuery
- 클릭한 이미지 객체를 함수에 전달하여 경로를 경고창으로 띄우는 예제입니다.
attr( '속성명' )
$( 이미지 ).attr( 'src' ) - 이미지의 경로를 가져옵니다.
jQuery 홈페이지 .attr() API 문서 : https://api.jquery.com/attr/