문서 객체 모델 Style

  dom style

style의 속성을 사용 할 수 있다. (css)

<input type="text" name="memberName" id="memberName"/>
<button type="button" id="goStyle">스타일 주기</button>

 

예를 들어 텍스트박스 하나와 버튼이 하나 있다.

크롬 개발자모드의 console창에 입력해서 dom 객체를 등록해 보자.

 

dom객체를 변수에 담으면 style속성을 사용할 수 있다.

 

콘솔에서 텍스트박스에 스타일을 직접 변경할 수 있다.

---

  스타일 이벤트

▶ 스타일 변경 기능

javascript에서 style 속성을 사용하는 방법.

아래의 스타일 주기 버튼을 클릭시 스타일의 값이 변경된다. 이를 응용해 토글 기능을 만들 수 있다.

 

 

<script>
var goStyle = document.getElementById('goStyle');
	goStyle.addEventListener('click',function(){
    	var memberName = document.getElementById('memberName');
        memberName.style.border = '1px solid #ff0000';
        memberName.style.color = '#ff0000';
    })
</script>

 

▶ innerHTML 문구 변경 기능

변수에 문자열을 초기화 시키고 새로 문자열을 할당하여 버튼을 누를시 문구가 바뀌는 기능이다.

 

HTML 삽입을 원한다면 innerHTML 버튼을 클릭

 

<button type="button" id="innerBtn">innerHTML</button>
<div id="innerHtmlTag">
	<p>HTML 삽입을 원한다면 innerHTML 버튼을 클릭</p>
</div>
<script>
	var innerBtn = document.getElementById('innerBtn');
    innerBtn.addEventListener('click',function(){
    var innerHtmlTag = document.getElementById('innerHtmlTag');
    var tag = '';
    tag += '<p>개발자, Sellica</p>';
    tag += '<span>HTML이 삽입되었습니다</span>';    
    innerHtmlTag.innerHTML = tag;
    })
</script>

 

문자열을 초기화 하고 싶다면(해당 태그 내의 문자를 지우고 싶다면) 아래 방법과 같이 한다.

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

 

▶ 테이블 생성 이벤트

innerHTML 메소드를 사용해 테이블도 생성가능하다.

테이블을 생성하세요

<button type="button" id="tableCreate">테이블생성</button>
<table style="border:1px solid #000000;">
	<tbody id="wrapHtml">
    </tbody>
</table>
<script>
	var tableCreate = document.getElementById('tableCreate');
    tableCreate.addEventListener('click',function(){
    	var wrapHtml = document.getElementById('wrapHtml');
        var tag = '';
        for(var i=0;i<=10;i++){
        	tag += '<tr><td>'+i+'</td></tr>';
        }
        wrapHtml.innerHTML = tag;
    });
</script>

 

▶ 이미지 변경 기능

클릭시 이미지의 주소속성을 변경하여 새로운 이미지로 대체시킨다.

 

<img src="" id="imageEvt">
<button type="button" id="imageChg">이미지변경</button>
<script>
	var imageChg = document.getElementById('imageChg');
    imageChg.addEventListener('click',function(){
    	var imageEvt = document.getElementById('imageEvt');
        imageEvt.src='';
    });
</script>