[JavaScript] HTML 속성 조작하기

WEB/JavaScript

[JavaScript] HTML 속성 조작하기

developer of the night sky 2023. 10. 5. 15:29

🔻HTML 속성 조작하기🔻

1. 태그를 찾아 속성을 조작할 수 있다.

2. 내용물(PCDATA)을 조작할 수 있다.

🔶조작 규칙

1. HTML의 대부분 속성은 JavaScript에서 동일한 이름의 프로퍼티로 제공한다.

txt1.value = '홍길동'

2. HTML 속성명이 복합어로 되어 있으면 JavaScript에서는 캐멀표기법으로 제공한다.

txt1.maxLength = 5;

3. 플래그 타입의 속성은 boolean 값으로 조작한다.

txt1.readOnly = true;

4. 열거형 타입의 속성 및 색상 속상은 문자열로 조작한다.

window.document.body.bgColor = 'blue';

🔶조작 하기

<body>
    <h1>JavaScript로 태그의 속성 제어하기</h1>

    <form name="form1">
        <input type="text" name="txt1">
        <input type="button" value="끄기" name="btn1">
    </form>

    <script>

        var txt1 = window.document.form1.txt1;
        var btn1 = window.document.form1.btn1;

        btn1.onclick = m1;

        function m1() {
            //텍스트 박스 조작하기
            // txt1.value = '홍길동'
            // txt1.maxLength = 5;
            // txt1.readOnly = true;

	//버튼으로 배경색 조작하기
            if (window.document.body.bgColor != '#000') {
                window.document.body.bgColor = '#000';
                btn1.value='켜기';
            } else {
                window.document.body.bgColor = '#FFF';
                btn1.value='끄기';
            }

        }


    </script>


</body>

버튼을 누를 때마다 배경색이 변경되고 버튼의 내용물도 끄기↔켜기로 변경된다.

저작자표시 (새창열림)