Javascript - HTML 스타일 컨트롤

인프런 자바스크립트 입문 수업을 듣고 중요한 내용을 정리했습니다.
개인 공부 후 자료를 남기기 위한 목적이므로 내용 상에 오류가 있을 수 있습니다.

HTML 스타일 컨트롤

HTML style control

<활용 예시>

//예시#1

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <style>
	.border-red {
		border:2px solid red;
	}

	.border-green {
		border:2px solid green;
	}

	.border-default { 
		border-width:1px;
		border-color:blue;
		border-style:solid;
	}
  </style>
</head>
<body>

  Text:
  <br>
  <input type="text" id="text1" onblur="changeBorder( );">

  <script>
  function changeBorder( ){
    
	var text1 = document.getElementById("text1");
	if(text1.value == "green"){
	text1.className = "border-green";  //Class를 부여하는 방법
	}else if(text1.value == "red"){
	text1.className = "border-red";
	}else{
	text1.className = "border-default";
	}
  
  }

  </script>
</body>
</html>



//예시#2

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <style>
	.border-red {
		border:2px solid red;
	}

	.border-green {
		border:2px solid green;
	}

	.border-default { 
		border-width:1px;
		border-color:blue;
		border-style:solid;
	}
  </style>
</head>
<body>

  Text:
  <br>
  <input type="text" id="text1" onblur="changeBorder( );">
  
  <button type="button" onclick="doSave();">Save</button>
  
  <script>
  function changeBorder( ){
    
	var text1 = document.getElementById("text1");
	if(text1.value != ""){
	text1.className = "border-green";  
	
  }

  function doSave( ){
  
	var text1 = document.getElementById("text1");
	if(text1.value == ""){
	text1.className = "border-red";
	return alert("필수값들을 입력하세요.");         
	}   
	console.log("doSave를 실행합니다.");

  }

  //return은 함수를 해당 위치에서 정지시키는 기능이 있다.
  
  //즉, 함수는 return 위치에서 더 이상 실행되지 않기에,
  //console.log("doSave를 실행합니다."); 코드 또한 실행되지 않는다.

  </script>
</body>
</html>



//예시#3

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>

  <br> Radio(이메일 수신):
  <br>
  <label>
  <input type="radio" name="radio_email_yn" value="Y" onclick="showEmail( );">동의</label>
  <label>
  <input type="radio" name="radio_email_yn" value="N" onclick="hideEmail( );" checked>거부</label>
	
  <div id="divEmail" style="display:none;">이메일 <input type="text" id="email"></div>
  <br>
  
  <script>

  function showEmail( ){
  
	document.getElementById("divEmail").style.display = "";
	//display = "";은 display를 보이도록 하겠다는 의미
    
  }

  function hideEmail( ){
  
	document.getElementById("divEmail").style.display = "none";

  }

  </script>
</body>
</html>



//예시#4

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>

  <br> Select:
  <select id="select1" onchange="doChange(this);">
	<option value=""></option>
	<option value="KO">Korea</option>
	<option value="CN">China</option>
	<option value="JP">Japan</option>
  </select>
  <select id="select2" style="display:none;">
	<option value="KO">서울</option>
	<option value="KO">부산</option>
	<option value="KO">대전</option>
	<option value="KO">제주</option>
  </select>

  <script>

  function doChange(obj){
  
	if(obj.value == "KO"){
	document.getElementById("select2").style.display = "";
	}else{
	document.getElementById("select2").style.display = "none";
	}
    
  }
  
  </script>
</body>
</html>

저작자표시 비영리 변경금지

'Javascript' 카테고리의 다른 글

Javascript - HTML 이벤트 컨트롤 (0)	2021.10.02
Javascript - HTML Element 컨트롤 (0)	2021.10.02
Javascript - 정규식(RegExp) (0)	2021.10.02
Javascript - Strict Mode (0)	2021.10.01
Javascript - Error(try, catch, finally) (0)	2021.10.01