JAVASCRIPT STEP 13 - Attribute

★ JavaScript로 HTML의 속성 제어하기

• 1. HTML 태그의 대부분의 속성은 JavaScript의 프로퍼티로 제공된다.
  • HTML : <input type="text" size="10">
  • JavaScript : txt1.size
• 2. HTML 태그의 속성명을 그대로 JavaScript 프로퍼티명으로 사용된다.
• 3. 대부분 읽기/쓰기 모두 지원한다. 일부 쓰기 or 읽기 전용이 있다.
• 4. 태그의 식별자 혹은 근본적인 속성은 조작하지 말것!
• 5. 플래그 타입의 속성은 boolean으로 조작한다.
• 6. HTML 속성명 합성어면, 캐멀 표기법으로 작성해야 한다.
• 7. HTML 속성값이 열거형 or 색상명이면 문자열로 작성한다.

// txt1.size = 100; //버튼 클릭 시 사이즈 늘어남
// txt1.value = '홍길동'; //쓰기
alert(txt1.value);	//읽기

//---------------- 하면 안됌!! --------------
txt1.type = 'radio'; //타입을 바꾸기
txt1.name='txt3'; //식별자 바꾸기

-------------------------------------------
txt1.readonly = true; // 안됌
txt1.readOnly = true;
-------------------------------------------
window.document.body.bgColor = 'gold';

 

 

■ 스위치 만들기

• 하나의 버튼(스위치) > On/Off > 토글 버튼(Toggle Button)

function m2() {

    if ( window.document.body.bgColor != 'black') {
        window.document.body.bgColor = 'black';
        btn2.value = '켜기';
    } else {
        window.document.body.bgColor = 'white';
        btn2.value = '끄기';
    }

}

 

■ 이미지 태그 접근

• 접근

<img src="images/catty01.png" name="cat1">

window.document.all.cat1

• 사용

window.document.all.cat1.width = 300;
window.document.all.cat2.height = 64;

// window.document.images[2].width = 300;
window.document.images['cat3'].width = 300;