Html & Script

자바스크립트 Attr 속성 추가 ,삭제, 조회하기

페이지 정보

본문

<!DOCTYPE html>

<html lang="ko">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    

    <script>

        /*

            엘리먼트의 속성을 추가/변경/삭제/조회하기

                - 속성의 추가 : 엘리먼트에 새로운 속성과 속성값을 추가한다.

                    el.setAttribute(속성명, 속성값);

                - 속성의 변경 : 엘리먼트에 지정된 속성명을 새로운 속성값으로 바꾼다.

                    el.setAttribute(속성명, 속성값);

                - 속성의 삭제 : 엘리먼트에서 지정된 송성명과 일치하는 속성을 삭제한다.

                    el.removeAttribute(속성명);

                - 속성값 조회 : 엘리먼트에서 지정된 속성명의 속성값을 가져간다.

                    el.getAttribute(속성명);

        */

        function disaledInput(){

            var input = document.getElementById("user-id");

            // input엘리먼트에 disbled="disabled" 속성 추가한다.

            input.setAttribute("disabled", "disabled");

        }

        

        function enabledInput() {

            var input = document.getElementById("user-id");

            // input엘리먼트에서 "disabled"라는 이름의 속성 삭제

            input.removeAttribute("disabled");

        }

        

        function getNameAttr() {

            var input = document.getElementById("user-id");

            var attValue = input.getAttribute("name");

            alert(attValue);

        }

        

        function getIdAttr(){

            var input = document.getElementById("user-id");

            var attValue = input.getAttribute("id");

            alert(attValue);

        }

        

    </script>

    

</head>

<body>

    <form>

        <input type="text" name="userid" id="user-id" />

    </form>

    

    <!-- input, select, textarea, button에 disabled="disabled" 속성을 추가하면 해당 엘리먼트는 비활성화 된다.-->

    <button onclick="enabledInput();">활성화</button>

    <button onclick="disaledInput();">비활성화</button>

    

    <button onclick="getNameAttr();">name 속성값 읽어오기</button>

    <button onclick="getIdAttr();">id 속성값 읽어오기</button>

</body>

</html>

 

 

 

 

[출처] http://blog.naver.com/kms4029/220561575807


관련자료

등록된 댓글이 없습니다.
Today's proverb
행복은 우리 마음속에 숨어 있는 거예요. 우리가 마음의 문을 열고 긍정적인 생각만 가진다면 우리에게 선물로 주어지는 거예요. 《어린 왕자에게서 배우는 삶을 사랑하는 지혜》, 최현복