티스토리 뷰

🌈 JavaScript

attr() VS prop() 차이점 및 사용

James Wetzel 2024. 3. 7. 14:24
728x90
반응형

attr()

  • 1. HTML 요소의 모든 속성(attribute)에 대해 작동합니다.
    예를 들어, href, src, title 등과 같은 HTML 속성을 조작하는 데 사용됩니다.
  • HTML 속성의 값을 항상 문자열(string)로 반환합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>attr() 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<a id="myLink" href="#">링크</a>

<script>
$(document).ready(function(){
    // href 속성 값 가져오기
    var hrefValue = $('#myLink').attr('href');
    console.log('href 속성 값:', hrefValue); // 출력: #

    // href 속성 값 변경
    $('#myLink').attr('href', 'https://www.example.com');
});
</script>

</body>
</html>

prop()

  • 주로 요소의 상태를 나타내는 속성(property)에 대해 작동합니다. 
    예를 들어, checked, disabled, selected와 같은 프로퍼티를 조작하는 데 사용됩니다.
  • 프로퍼티의 값은 보통 부울(boolean)이거나 숫자(number)일 수 있습니다.
    예를 들어, checked 프로퍼티는 체크박스의 체크 여부를 나타내는 부울값을 가집니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>prop() 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<input type="checkbox" id="myCheckbox"> 체크박스

<script>
$(document).ready(function(){
    // checked 프로퍼티 값 가져오기
    var isChecked = $('#myCheckbox').prop('checked');
    console.log('checked 프로퍼티 값:', isChecked); // 출력: false

    // checked 프로퍼티 값 변경
    $('#myCheckbox').prop('checked', true);
});
</script>

</body>
</html>
728x90
반응형
저작자표시