[jQuery]span, div등태그의 class값 변경 및 attr()의 활용

원주남자
포로그래밍/jQuery
2019. 7. 2.

안녕하세요? 원주남자입니다.

span태그의 class값을 변경하기 이전에

attr()태그에 대하여 알아여 하는데요. attr()태그는 어떤태그의 id, class, title등의 속성값을 알아내거나 변경할때 사용됩니다.

<img src="/hello.jpg" id="img_hihi" class="img_class">

위 태그를 기준으로 설명드리면 src, id, class가 속성이 되겠네요~

예제를 통해서 알아볼까요~

hello world~ 는 아니고

그 아래에 '안녕하세요??'가 span태그로 작성되어있구요.

또 그 아래에는 button 2개를 배치하였습니다.

<html>
<head>
<title>Home</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<style type="text/css">
.type1{
	background-color:black;
	font-size:20px;
	font-color:white;
}
.type2{
	background-color:red;
	font-size:10px;
	font-color:white;
}
</style>
<script type="text/javascript">
function type1_exe(){
	$('#span_hello').attr('class','type1');
}

function type2_exe(){
	$('#span_hello').attr('class','type2');
}
</script> 	
</head>
<body>
<div>
	<h1>
		Hello world!  
	</h1>

	<span id="span_hello" class="" >
		안녕하세요??
	</span>
</div>
<br>
<input type="button" value="type1실행" onclick="type1_exe()"/>
<input type="button" value="type2실행" onclick="type2_exe()"/>
</body>
</html>

각 버튼을 클리하면 class값이 변경이됩니다.

그리고 css에 미리 정의해둔 해당 class의 css의 속성을 적용받게됩니다.

실제로 클릭하게되면은

위와 같은 결과를 확인할 수가 있습니다.

한번에 여러개의 속성값을 바꾸는 방법도 있는데요.

<img id="imsi_img" src="hello.png" class="type1">
<script>
/*한번에 한개씩*/
$('#imsi_img').attr('class','type2');
$('#imsi_img').attr('src','hello2.png');
</script>
<script>
/*한번에 여러개~*/
$('#imsi_img').attr({ 
  class: "type2",
  src: "hello2.png"
});
</script>

위에 같은 경우는 한번씩 선언하여서 class와 src값을 바꾸는 방법이 되겠고요.

아래에 있는게 한번에 2개의 속성을 바꾸는 방법이 되겠습니다~

저같은 경우는 2개만을 바꾸었지만 뒤에 쉼표를 붙이면서 더 여러개도 가능하니 참고하세요~

위 예제는 span태그와 img태그에만 적용시킨 예제인데 그 외의 div, p태그등 여러태그에 다양하게 활용이 가능합니다.

저작자표시 비영리 변경금지 (새창열림)

'포로그래밍 > jQuery' 카테고리의 다른 글

[jQuery] 이벤트 사용시 $(this)의미와 활용 (0)	2020.12.08
[Jquery] Each()함수를 사용한 li값 가져오기 (0)	2020.12.03
[Javascript] 배열(Array)선언, 추가, 삭제, 관리방법 (0)	2020.11.29
[jQuery]CSS, 스타일 적용하기(width, height, display등등) (0)	2019.07.10
[jQuery]ul안쪽의 li태그의 동적 추가(append) 및 삭제(remove) (2)	2019.07.08

원주남자