관련글


DOM 요소에 속성 추가하기
다음과 같이 원하는 속성을 요소에 추가시킬 수 있습니다. 여기서는 data-value라는 임의의 속성에 10 이라는 값을 추가시켰습니다.



'data-' 로 시작하는 속성은 HTML5 표준에서 요소에 원하는 값을 저장하고 싶은 경우 사용하는 속성입니다. jQuery에서 속성을 추가하고 싶은 경우에는 attr(속성명, 속성값) 이라는 메서드를 사용합니다. 
<script>                                                                                 
    $(document).ready(function () { 
        $('span').attr('data-value'10); 
    });
</script> 
cs




속성 여러개 동시에 추가하기
속성을 동시에 여러개 추가할 때에는 attr(객체) 메서드를 사용해 객체를 넘겨주어 동시에 여러 속성을 추가할 수 있습니다.
<script>                                                                                 
    $(document).ready(function () { 
        var attrObj = { 
            'data-value'10
            'data-value2'20
            'data-value3'30 
        };
 
 
        $('span').attr(attrObj); 
    });
</script> 
cs


넘겨준 객체의 속성과 값들이 그대로 요소에 추가되었습니다.





속성 값 가져오기
특정 속성의 값을 얻어야 할 때에는 attr(속성명) 메서드를 사용합니다.



다음과 같이 attr()메서드에 특정 속성명을 지정하면 해당 속성의 값이 리턴됩니다.
<script>                                                                                 
    $(document).ready(function () { 
        var dataValue = $('span').attr('data-value'); //10이 리턴됩니다. 
    });
</script> 
cs





DOM 요소에 속성값 수정하기
또한 attr() 메서드는 속성 추가 뿐만 아니라 수정도 가능한데, 지정한 속성이 존재하지 않는 경우에는 추가이고 존재하는 속성인 경우에는 지정한 값으로 수정됩니다. 따라서 수정은 추가와 마찬가지로 attr(속성명, 속성값) 메서드를 사용합니다.
<script>                                                                                 
    $(document).ready(function () { 
        $('span').attr('data-value'10); 
    });
</script> 
cs





DOM 요소에 속성 제거하기
반대로 원하는 속성을 제거하고 싶을 수 있습니다.  속성을 제거할 때에는 removeAttr(속성명) 메서드를 사용합니다.
<!DOCTYPE html> 
<html lang="ko"> 
<head> 
    <script src="jquery-3.3.1.min.js"></script> 
    <script>                                                                             
        $(document).ready(function () { 
            $('span').removeAttr('data-value'); 
        });
    </script> 
</head> 
    <body> 
        <span data-value="10"></span> 
    </body> 
</html> 
cs



span 태그에 있던 data-value 속성이 제거되었습니다.



블로그 이미지

도로락

IT, 프로그래밍, 컴퓨터 활용 정보 등을 위한 블로그

댓글을 달아 주세요! 질문 환영합니다!