🍁HTML 태그의 속성 제어하기
태그를 조작한다는 건 다음의 두 가지의 의미를 가진다.
첫 번째는 속성의 값을 바꾼다는 것이고, 두 번째는 PCDATA(내용물)를 조작한다는 것이다.
텍스트 박스 조작
- txt.프로퍼티
HTML의 대부분의 속성들은 JavaScript에서 동일한 이름의 프로퍼티로 제공한다.
단, HTML 속성명이 복합어일 경우 JavaScript에서는 캐멀 표기법🐫으로 제공한다.
프로퍼티의 종류로는 value 등이 있으며, 대부분의 프로퍼티들은 입출력(읽기, 쓰기)이 모두 된다. 일부 프로퍼티만이 읽기 또는 쓰기 전용이다.
텍스트 박스의 속성들을 조작해 보도록 하자!👉
쓰기 작업
txt1.value = 'Isaac'; //쓰기
읽기 작업
alert(txt1.value); //읽기
복합어
txt.maxLength = 5;복합어의 경우 HTML에서 maxlength라고 할지라도 JavaScript에서는 캐멀 표기법으로 maxLength로 적어 주어야 한다.
플래그 타입
txt.readOnly = true;플래그 타입의 속성은 boolean 값(true, false)으로 조작한다.
열거형 속성/색상 속성
//<body bgcolor="blue">
window.document.body.bgColor = 'blue';열거형 속성/색상 속성은 문자열로 조작한다.
주의 사항
txt1.type = 'radio'; //타입을 바꾸는 행동 X
txt2.name = 'txt2'; //식별자를 바꾸는 행동 X
text 타입을 radio 타입으로 바꾸는 등의 조작도 가능하긴 하지만, 이런 근본적인 값은 건드리지 않는 게 좋다.
그리고 식별자를 바꾸는 행동은 절대 금지하도록 한다.
토글 버튼 (Toggle Button)
if (window.document.body.bgColor != '#000') {
window.document.body.bgColor = '#000';
} else {
window.document.body.bgColor = '#FFF';
}if (btn1.value != '켜기') {
window.document.body.bgColor = '#000';
btn1.value = '켜기';
} else {
window.document.body.bgColor = '#FFF';
btn1.value = '끄기';
}
하나의 버튼으로 On/Off 스위치 기능을 수행하는 버튼을 토글 버튼이라고 한다.
배경색을 가지고 토글 버튼을 조작할 수 있지만, 글자를 변경해서 조작할 수도 있다.
