다연이네

[days01] 버튼 누르면 border 스타일 변경 본문

Web/JavaScript

[days01] 버튼 누르면 border 스타일 변경

　다연　 2020. 12. 9. 21:29
반응형

버튼을 누르면 위 보더의 스타일이 변하도록 코딩

 

1. JavaScript로 작성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
 
<!--  javascript[js] html 스타일 변경 -->
<p id="demo">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At perspiciatis.</p>
<button onclick="change();">스타일 변경</button>

<script>
/* js는 대소문자 구분을 한다. */
	function change() {
		var ptag = document.getElementById("demo");
		ptag.style.color="red";
		ptag.style.fontSize="20px";
		ptag.style.border="1px solid gray";
		
	}
</script>
</body>
</html>

 

2. jQuery로 변경

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>  //3) header에 쓸때는 .ready가 필수
	
	$(document).ready(function(){ //이 코딩 필수
		$("button").click(function() {
	
			//var ptag = document.getElementById("demo");
			//ptag.style.color="red";
			//ptag.style.fontSize="20px";
			//ptag.style.border="1px solid gray";
			
			/* 
			$("#demo").css("color","red");
			$("#demo").css("font-size","20px");
			$("#demo").css("border","1px solid gray"); 
			*/
			
			/* 
			$("#demo") //이렇게 체인처럼 연결할 수 있다.
			.css("color","red")   //[css() jquery 함수 사용]
			.css("font-size","20px")
			.css("border","1px solid gray");  
			*/
			
			$("#demo").css({ //이렇게도 쓸 수 있으며 제일 낫다
				"color":"red",
				"font-size":"20px",
				"border":"1px solid gray"
			});
			
			
		});
	});
	//jquery도 자바스크립트라서 여기 그대로 넣어도 됨
	
</script>

</head>
<body>

<!-- jquery를 사용해서 변경 -->
<p id="demo">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At perspiciatis.</p>
<button>스타일 변경</button>

<!--  1) 원래꺼
	<script>
	 function change() {
		var ptag = document.getElementById("demo");
		ptag.style.color="red";
		ptag.style.fontSize="20px";
		ptag.style.border="1px solid gray";
		
	} 
</script> 
-->


<!-- 2) jquery 선언 후 내용은 js 복붙한 거
<script> //header 태그에 그대로 붙혀넣으면 안뜬다
//=> 메모리에 올라가지 않았는데 요청하니 안되는 것
	$("button").click(function() {
	//태그명(button)이 선택자가 될 수 있다
		var ptag = document.getElementById("demo");
		ptag.style.color="red";
		ptag.style.fontSize="20px";
		ptag.style.border="1px solid gray";
	});
	//jquery도 자바스크립트라서 여기 그대로 넣어도 됨
	
</script> 
-->
</body>
</html>

jQuery는 작성 방법이 다양하다.

 

[1] 정직하게

$(document).ready(function(){ //이 코딩 필수
		$("button").click(function() {
        
			$("#demo").css("color","red");
			$("#demo").css("font-size","20px");
			$("#demo").css("border","1px solid gray"); 

		});
	});

[2] 체인처럼 연결

$(document).ready(function(){ //이 코딩 필수
		$("button").click(function() {
	
			$("#demo") 
			.css("color","red")  
			.css("font-size","20px")
			.css("border","1px solid gray");  

		});
	});

[3] 가장 간단하고 편리하게

$(document).ready(function(){ //이 코딩 필수
		$("button").click(function() {
	
			$("#demo").css({ //이렇게도 쓸 수 있으며 제일 낫다
				"color":"red",
				"font-size":"20px",
				"border":"1px solid gray"
			});	
		});
	});
반응형
저작자표시 비영리

'Web > JavaScript' 카테고리의 다른 글

[days01] 버튼으로 전구 켜고끄기  (0) 2020.12.09
[days01] event.srcElement 속성  (0) 2020.12.09
[days01] x.innerHTML == $("#").html($("#").val())와 jQuery의 if문  (0) 2020.12.09
[days01] tabindex, accesskey  (0) 2020.12.09
[days01] 자바스크립트  (0) 2020.12.08
'Web/JavaScript' Related Articles more
Comments