Java Script로 배경색 바꾸는 체인지 버튼 만들기
Java script
<div id="haag" class="black">Java script
<input type="button"class="mo" value="black" onclick="chang();t.className='black'"/>
<input type="button" class="mo" value="white" onclick="chang();t.className='white'"/>
<script>
var t=document.getElementById('haag');
function chang(){
document.getElementById('haag');
t.className='black';
document.getElementById('haag');
t.className='white';
}
</script>
onclick 메소드 버튼 만들기
티스토리 모바일 웹 과 모바일 앱 의 불 일치로 일부 스크립트 동작이 작동 되지 않아 많은 애로 를 겪고 있습니다.
원래의 계획은 prompt명령 창으로 새로운 이름을 받아 체인지 하는 작업을 하고자 했지만 명령어 창이 앱에서 동작 하지 않아 자바스크립트 의 onclick메소드를 이용 해 브라우져 창의 배경색을 바꾸는 버튼을 만들게 되었습니다.
우선 반대의 색상으로 체인지 될 두개의 버튼을 만들어야 됩니다.
전체 화면을 담당 하는 body태그에 선택자를 지정 해야 겠지만 앱웹의
바디 테그는 스킨 편집기 안에 위치 함으로 임의의 태그에 선택자를 정의 하도록 합니다.
<div id="target" class="black">
div태그를 임의의 바디로 생각 하고 id와 클래스 선택자를 정의 해 줍니다
그리고 스크립트로 onclick메소드를 정의 하는 함수를 생성 해 주도록 합니다.
<script>
var ch=document.getElementById('target');
function chang(){
document.getElementById('target');
ch.className='black';
document.getElementById('target');
ch.className='white';
}
</script>
document.getElementById()메소드를 변수 ch에 담습니다.
그런후 chang()함수를 정의 합니다.
그리고 두개의 반대 되는 버튼을 만들고 onclick메소드에 정의 해 주도록 합니다.
<input type="button"class="mo" value="black" onclick="chang();ch.className='black'"/>
<input type="button" class="mo" value="white" onclick="chang();ch.className='white'"/>
그리고 임의의 바디 구간과 두개의 버튼에 id 또는 CLASS선택자를 정의 하고 반드시 CSS로 꾸며 주어야만 합니다.
Java Script는 전기적 신호로 테그내의 값을 바꿔 주는 동작은 할수 있지만 직접 꾸미는 일은 못하도록 설계 된 문법 체계를 갖고 있기 때문 입니다.