javascript - 문서 객체 모델 style

   1. 스타일 설정하기 - style

   <input type ="text" name="memberName" id="memberName" />
   <button type="button" id="goStyle">스타일 주기</button>
   <script type="text/javascript">
         //memberName 아이디 input 박스 테두리와 색상 변경하는 토글기능 
      var goStyle =document.getElementById('goStyle');
      goStyle.addEventListener('click',function(){
         var memberName =document.getElementById('memberName');
         //rgb(255, 0, 0) <-- 빨강
         console.log(memberName.style.color);
         console.log(memberName.style.border);
         if(memberName.style.color == 'rgb(255, 0, 0)'){//빨강
               memberName.style.border = '1px solid #000000';
               memberName.style.color ='#000000';
         }else{
                memberName.style.border = '1px solid #ff0000';
                 memberName.style.color ='#ff0000';
         } 
      });
   </script>

 

 

 2. html 삽입 - innerHTML

 

버튼을 클릭해주세요.

 

   <button type="button" id="innerBtn">html 삽입</button>
   
   <div id="innerHtmlTag">
      <h1>버튼을 클릭해주세요.</h1>
   </div>
   
   <script type="text/javascript">
   var innerBtn =document.getElementById('innerBtn');
   innerBtn.addEventListener('click',function(){
      var innerHtmlTag =document.getElementById('innerHtmlTag');
      console.log(innerHtmlTag.innerHTML);
      var tag ='';
      tag += '<h1 style="color : #ff0000;">안녕하세요</h1>';
      tag += '<span>웰컴웰컴 한국스마트정보교육원</span>';
      innerHtmlTag.innerHTML = tag;
   });​

 

 

3.  html 초기화 시키기

document.getElementById('innerHtmlTag').innerHTML = '';

4.  버튼 클릭시 이미지 바꾸기

   <img src="./resource/img/그루트.jpg"  id="imageEvTarget">
   <button type="button" id="imageChange">이미지바꾸기</button>
   
   <script type="text/javascript">
   var index = 0;
   
    var imageChange =document.getElementById('imageChange');
    imageChange.addEventListener('click',function(){
       var imageEvTarget=document.getElementById('imageEvTarget');
       if(index == 0){
          imageEvTarget.src= './resource/img/헬라.jpg';
          index ++;
       }else{
       imageEvTarget.src= './resource/img/그루트.jpg';
          index =0;
       }    
    });
   </script>

실습하기~

1]  아래의 버튼 클릭시 body의 배경 색상을 검정 또 한번 클릭시 흰색으로 바뀌게 스크립트 코드를 작성하시오.

 <button type="button" id = "backColorChange"> 배경색 변환 </button>
 	<script type="text/javascript">
		var index = 0;
		var backColorChange = document.getElementById('backColorChange');
		backColorChange.addEventListener('click',function(){
			var body =  document.getElementsByTagName('body');
			if(index ==0){
				body[0].style.backgroundColor = '#000';
				index++;
			}else{
				body[0].style.backgroundColor = '#fff';
				index = 0 ;
			}
		});
	</script>

 

2] 아래의 버튼 클릭시 1~10까지의 행의 값을 가진 테이블을 완성 시키시오.

버튼을 클릭해 주세요.

	<button type="button" id="tableCreate"> 테이블 생성 </button>
	<table id ="table" border="1">
		<tbody id = "tBody">
			<tr>
				<td> 버튼을 클릭해 주세요. </td>
			</tr>
		</tbody>
	</table>
	<script type="text/javascript">
		var tableCreate = document.getElementById('tableCreate');
		tableCreate.addEventListener('click',function(){
			var tBody = document.getElementById('tBody');
			for(var i =1; i<=10 ; i++){
				console.log(i);
				var tr = '<tr> <td>'+ [i] +' </td></tr>';
				tBody.innerHTML += tr;
			}
		});
	</script>