기록하는 코더

[JSP] 특정 요소에 css 요소 주기 - toggleClass 본문

JSP

[JSP] 특정 요소에 css 요소 주기 - toggleClass

damda_di 2023. 1. 10. 11:13

특정 요소에 css 요소 주기 - toggleClass

 

특정 요소에 css를 적용하는 연습을 하던 중

버튼을 한번 더 누르면 css 요소를 on/off하는 기능을 넣고 싶어서 toggle() 메소드를 사용해봤다.

...
	$(function(){
	    $("button").on('click',function(){
	    	//$("태그1,태그2,태그3..").실행_함수()
	    	//선택된 요소는 하나의 문서 내에 여러 개의 요소가 존재할 수 있음
	    	//이들 요소 중에서 선택자에 지정된 요소를 선택할 수 있음
	    	//해당 태그 요소를 선택하여 속성을 바꾸어줌
   			$("h2, div, span").css("background-color", "yellow").toggle();
		});
	});
    ...

 

버튼을 연속해서 눌렀더니 문장 자체가 사라지는 문제가 생김

 

 

버튼을 클릭했을 때 css 요소만 on/off시키고 싶은데 요소 자체가 사라지는 문제가 생겼다.

 

문제를 해결하기 위해 toggle 함수에 대해서 알아보게 되었다.

// toggler함수 형태
$('선택요소').toggle();
$('선택요소').toggle(speend,callback);
toggle() 함수 (내장함수)
- .toggle()은 두 개의 상태를 번갈아 바꾸는 설정값
- add()와 remove()  / show(), hide()  / on,off 를 한번에 사용할 수 있는 메서드
- 선택한 요소가 보이면 보이지 않게, 보이지 않으면 보이게 한다.
(그 요소가 처음부터 어떤 상태에 있는지에 따라 결정됨)
- 시간값(duration)을 세팅하면, .toggle() 함수는 애니메이션 효과를 가짐



참고 링크
https://homzzang.com/b/jquery-176
https://findfun.tistory.com/366
https://goddino.tistory.com/129

 

 

 

해결방법

 

태그 자체가 사라지지 않고

css 요소만 추가/제거 하고 싶어서

미리 임의의 class에 style 요소를 정의해두어

class를 부여하는 방식으로 css를 적용시켰다.

 


JavaScript를 이용한 예제

- .ClassList.toggle('클래스명') 라는 메소드를 이용해서 style태그에 미리 선언해둔 css를 적용시켜보았다.

<%@ page contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>CSS 적용 연습</title>
<script src="<%=request.getContextPath() %>/js/jquery.min.js">
</script>
<style>
.toggleClass{
	background-color : yellow;
}
</style>
<script>
function fn_click(){
		
	let tag = document.querySelectorAll('h2,div,span')
	console.log(tag)
	console.log(tag[0])

	tag[0].classList.toggle('toggleClass')
	tag[1].classList.toggle('toggleClass')
	tag[2].classList.toggle('toggleClass')
	
	};
</script>
</head>
<body>
	<h1>Welcome to My Web Page</h1>
	<h2>Nice to meet you</h2>
	<div>Very nice indeed.</div>
	<p>How are you?</p>
	<p>I'm fine, <span>thanks.</span></p>
	<button onclick="fn_click()">Click me</button>
</body>
</html>

 

 

Jquery를 이용한 예제

-toggleClass() 라는 메소드를 이용해서 style태그에 미리 선언해둔 css를 적용시켜보았다.

<%@ page contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Toggle Class 연습</title>
<style>
.change{
	background-color: yellow;
	border : 1px solid red;
}
</style>	
<script src="/js/jquery.min.js">
</script>
<script>
	$(function(){
	    $("button").on('click',function(){
	    	//$("태그1,태그2,태그3..").실행_함수()
	    	//선택된 요소는 하나의 문서 내에 여러 개의 요소가 존재할 수 있음
	    	//이들 요소 중에서 선택자에 지정된 요소를 선택할 수 있음
	    	//해당 태그 요소를 선택하여 속성을 바꾸어줌
   			$("h2, div, span").toggleClass('change');
		});
	});
</script>
</head>
<body>
	<h1>Welcome to My Web Page</h1>
	<h2>Nice to meet you</h2>
	<div>Very nice indeed.</div>
	<p>How are you?</p>
	<p>I'm fine, <span>thanks.</span></p>
	<button>Click me</button>
</body>
</html>

 

 

출력결과

 

태그가 사라지지 않고 css를 on/off 할 수 있게 됐다.

 

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

'JSP' 카테고리의 다른 글

[Bootstrap] Modal창 띄우기  (0) 2023.01.31
[JSP] html 특수문자  (0) 2023.01.18
[JSP] 유효성 검사 - 기본 유효성 검사 & 예제  (0) 2023.01.05
[JSP] attr(), prop()  (0) 2023.01.02
[JSP] form태그 - select option 사용  (0) 2023.01.02
'JSP' Related Articles more