본문 바로가기
구글

attr()메서드

by 궁금증해결소 2020. 9. 19.

attr()메서드는 선택한 요소에 새 속성을 생성하거나 기존의 속성을 변경할 때 또는 요소의 속성값을 불러올때 사용합니다. removeAttr()메섣는 선택한 요소에서 기존의 속성을 삭제할 때 사용합니다.


attr메서드의 게터

<!DOCTYPE html>

<html lang="ko">

    <head>

        <meta charset="UTF-8">

        <title>제이쿼리 메서드</title>

        <script src="jquery-1.12.0.min.js"></script>

        <script>

            //축약구문 - 준비구문을 줄여씀

            $(function(){

                //attr() - 문서객체의 태그속성을 컨트롤하는 메서드

                //게터 : 값을 얻어오는 메서드

                //attr()의 게터 : 태그 속성값을 얻어옴

                //attr('태그속성명')

                

                var src = $('img').attr('src');

                

                alert(src);

            });

        </script>

    </head>

    <body>

        <img src="a01.jpg" alt="이미지01">

    </body>

</html>


attr메서드의 세터1

<script>
     //축약구문 - 준비구문을 줄여씀
     $(function(){
     //attr() - 문서객체의 태그속성을 컨트롤하는 메서드
     //세터 : 값을 변경하는 메서드
     //attr('태그속성명',값) : 태그 속성 변경

         $('img').attr('width',300);
     });
</script>


attr메서드의 세터2

<script>

     $(function(){

         $('img').attr({

              width: 300,

              height: 300

         });

      });

</script>


attr메서드의 세터3

     $(function(){

         $('img').attr('width',function(index){

              return (index + 1) * 100;

         });

      });

</script>


웹에디터를 이용하여 예제를 사용해 하나씩 대입하고 확인해보면 연습하도록 합니다.

댓글