jquery3

조수경·2021년 11월 22일
0

HTML

목록 보기
68/96
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel = "stylesheet" href = "../css/mystyle.css" type="text/css">
<script src="/jqpro/js/jquery-3.6.0.min.js"></script>

<script>
function proc1(){
	//전체 배경색을 변경
	$('*').css('background', 'yellow');
	
	//h1요소의 글자색을 파랑
	document.getElementsByTagName('h1')[0].style.color = 'blue'/* 스크립트 방식*/
	$('h1').css('color', 'blue');/*제이쿼리 방식*/
	
	//var vh = $('h1');
	//vh.css('color','blue');
	
	//id가 para인 요소의 글자색은 녹색
	document.getElementById('para').style.color = 'green';/* 스크립트 방식*/
   	$('#para').css('color', 'green');/*제이쿼리 방식*/
	
	//class가 sample요소의 글자색은 빨강
	document.getElementClassName('sample')[0].style.color = 'red';
	$('.sample').css('color', 'red');
}
</script>


</head>
<body>

<div class = "box">

   <br>
  <button type = "button" onclick="proc1()">확인</button>
  <div id = "result1">
         <h1> 제목입니다 </h1>
		 <h2 id="para"> 작은 제목입니다 </h2>
		 <h2 class="sample"> 샘플입니다 </h2>
  
  </div>
</div>
</body>
</html>
profile
신입 개발자 입니다!!!

0개의 댓글