document.getElementById 메소드와 css가 적용된 예문 입니다.

오늘은 자바스크립트의 사용자 함수를 정의 하고document.getElementById라는 메소드와

.innerHTML 객체를 이용 하여 체크폼 속의 내용을 css로 적용 해 보고 적용 되어 지는 내용의 결과를 보면서 액션이 이루어지는 과정에 대한 공부를 하도록 해 봅니다.

아래는 자바 스크립트와 html태그의 div태그에 적용된 스타일과 소스 입니다.

<style>

.red{font-size:23px; color:red;}

.blue{font-size:23px; color:blue;}

</style>

자바 스크립트로 함수를 먼저 만들어 줍니다.

순서는 바뀌어도 상관은 없습니다.

<script>

function papa(a){

 document.getElementById("test").innerHTML="a.value";

} 

function chkfrm(){ 

var a=document.getElementById ("megu").value; 

if (a==""){

document.getElementById ("test").innerHTML="내용을 입력하세요";

document.getElementById ("test").setAtribute=('class','red');

}else {document.getElementById("test").innerHTML="good nise!";

document.getElementById("test").setAtribute('class','blue');

}

}

</script>

 

<input type="text" name="memo" id="megu">

먼저 이렇게 id가 megu 라는 입력 폼을 만들고

<input type="button" value="확인" onclick="chkfrm()">

바로 옆에다 확인 이라는 값을 가진 버튼을 만들어 줍니다.

위처럼 자바스크립트로 만든 이벤트 메소드인 onclick="chkfrm()"을

버튼 에 같이 주게 되면 버튼을 클릭시 위의 megu 입력폼 안의 값에 따라

id가 test라는 태그내에 값이 다르게 전달 되도록 설계가 된 것입니다.

<div id="test"></div>

document.getElementById("test").innerHTML="a.value";

위 객체의 뜻은 id가 test인 태그를 찾아 그 태그 안에다 a의 값을 입력 하고

브라우져상에 나타내 라는 명령어 인것입니다.

그럼 a의 값은 어떤 것이냐면요 바로 이렇게 만든 것입니다.

document.getElementById("megu").value";

이것을  변수 a에다 대입한 것입니다.

var a=document.getElementById("megu").value";

즉 우변의 긴 내용들을 a로 대입 해서 간단 하게 만든 것이죠

변수를 이용 하는 이유중 가장 큰 이유라고 생각이 듭니다.

이렇게 해주면 위에서 함수 인자로 a가 들어 가면 megu입력창의 값에 따라 조건분기에 의해

.setAtribute에 적용 된 클래스를 출력 하게 되는 것입니다.

위처럼 a의 값이 없을경우  if문에 의해  red클래스가 적용되고

그렇지 않을경우 else에 의해 blue클레스가 적용되어 지는 것이죠

즉 폼 안에 내용을 입력 하지않은 경우 css스타일의 red클래스가 적용된 결과를 볼수 있으며

내용 입력시엔 blue클레스가 적용되어진 결과를 확인 할수 있습니다.

아래는 폼내 의 입력 유무에 따라 도출되는 결과값에 따라 컬러가  다르게  적용 되는것을 확인 할수가  있습니다.

인풋 창안에 글을 입력 하지 않고 확인 버튼을 눌러 보고 글을 입력 하고 확인 버튼을 눌러 봅니다.

 

위에서 테스트 해본 결과를 보면 스타일 중 폰트크기와 컬러로 값이 출력 되어 지는것을 확인 할수가 있습니다.