ex15

JavaScript로 HTML의 속성 제어하기

1. HTML 태그의 대부분의 속성은 JavaScript의 프로퍼티로 제공된다.
    - HTML: <input type="text" size="10">
    - JavaScript: txt1.size

2. HTML 태그의 속성명 그대로 JavaScript 프로퍼티명으로 사용된다.

3. 대부분 읽기/쓰기 모두 지원한다. 일부 쓰기 or 읽기 전용이 있다.

4. 태그의 식별자 혹은 근본적인 속성은 조작하지 말것!!

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

6. HTML 속성명이 복합이면 캐멀 표기법으로 작성한다.
    -readonly(X) > readOnly

7. HTML 속성값이 열거형 or 색상명이면 문자열로 작성한다.

<body>
    <!-- ex15_attribute.html -->

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

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

    <script>

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

        btn1.onclick = m1;
        btn2.onclick = m2;

        function m2() {

            //window.document.body.bgColor = 'black';
            // alert(window.document.body.bgColor);

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

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

        }

        function m1() {

            /*
                JavaScript로 HTML의 속성 제어하기
            */

            //<input type="text" size="10" value="" readonly>
            // txt1.size = 100;
            // txt1.value = '홍길동'; //쓰기
            // alert(txt1.value); //읽기

            // type, 식별자 조작 가능 BUT 하지말것
            // txt1.type = 'radio';
            // txt1.name = 'txt3';

            // txt1.readOnly = true;

            // window.document.body.bgColor = 'gold';


        }//btn1.onclick

    </script>
</body>
</html>

화면

Document

JavaScript로 HTML 태그의 속성을 제어하기

ex16

사진 찾기

1. all > 페이지 내의 모든 요소 찾아줌

2. 인덱스 이용(잘 안씀)

3. 키(name) 이용

<body>
    <!-- ex16_images.html -->

    <img src="images/catty01.png" name="cat1">
    <img src="images/catty02.png" name="cat2">
    <img src="images/catty03.png" name="cat3">

    <script>

        // all > 페이지 내의 모든 요소 찾아줌(비표준)
        // window.document.all.txt1
        // window.document.all.btn1
        window.document.all.cat1.width = 300;
        window.document.all.cat2.height = 64;

        //인덱스 또는 키(name)으로 찾기 (표준)
        // window.document.images[2].width = 300; //잘 안씀
        window.document.images['cat3'].width = 300;

    </script>
</body>
</html>

ex16

이미지 찾기

-all > 페이지 내의 모든 요소 찾아줌(비표준)
// window.document.all.txt1
// window.document.all.btn1

- 인덱스 또는 키(name)으로 찾기 (표준)
// window.document.images[2].width = 300; //잘 안씀

<body>
    <img src="images/catty01.png" name="cat1">
    <img src="images/catty02.png" name="cat2">
    <img src="images/catty03.png" name="cat3">
    <script>
        // all > 페이지 내의 모든 요소 찾아줌(비표준)
        // window.document.all.txt1
        // window.document.all.btn1
        window.document.all.cat1.width = 300;
        window.document.all.cat2.height = 64;

        //인덱스 또는 키(name)으로 찾기 (표준)
        // window.document.images[2].width = 300; //잘 안씀
        window.document.images['cat3'].width = 300;
    </script>
</body>

'프로그래밍 공부 > JavaScript' 카테고리의 다른 글

[ex18~22] screen, location, history, collection, link (0)	2023.04.25
[ex17] window (0)	2023.04.24
[ex13~14] Mouse Event, Key Event (0)	2023.04.21
[ex11~] BOM, event (0)	2023.04.21
[ex09~10] Date, Array (0)	2023.04.21

🚀

[ex15~16] Attribute, images

JavaScript로 HTML 태그의 속성을 제어하기

'프로그래밍 공부 > JavaScript' 카테고리의 다른 글

티스토리툴바

[ex15~16] Attribute, images

JavaScript로 HTML 태그의 속성을 제어하기

'프로그래밍 공부 > JavaScript' 카테고리의 다른 글

'프로그래밍 공부/JavaScript' Related Articles

티스토리툴바