-
jQuery attr로 속성 값 불러오기, 속성 값 변경하기DEV/javascript 2022. 3. 28. 20:40
jQuery는 .attr를 통해 속성 값을 불러오거나 속성 값 변경, 속성 값 추가가 가능하다.
사용 방법은 간단하다.
예시 코드 (html, js)
<!DOCTYPE html> <html> <meta charset="utf-8"> <head> <!-- [jQuery] --> <script src="jQuery.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <!-- [bootstrap 생략] --> </head> <body> <div style="margin-left: 10px; margin-top: 10px;"> <button id="testBtn1" class="btn btn-secondary">TEST1</button> </div> <div style="margin-left: 10px; margin-top: 10px;"> <button id="testBtn2" class="btn btn-secondary">TEST2</button> </div> <div style="margin-left: 10px; margin-top: 10px;"> <button id="testBtn3" class="btn btn-secondary">TEST3</button> </div> <div id="testDiv" class="" style="color: red;"> testText </div> </body> <script src="./test.js"></script>"use strict" // 실행 $(function(){ $(document).on('click', '#testBtn1', function(){ const myAttr = $("#testDiv").attr("class"); console.log("class1 ? : ", myAttr); }); $(document).on('click', '#testBtn2', function(){ $("#testDiv").attr("class", "addClass"); console.log("class2 ? : ", $("#testDiv").attr("class")); }); $(document).on('click', '#testBtn3', function(){ $("#testDiv").removeAttr("class"); console.log("class3 ? : ", $("#testDiv").attr("class")); }); })버튼 1(#testBtn1) 클릭 이벤트 : $('#testDiv')의 class 속성 값을 가져온다.
초기 class 값에는 아무것도 들어있지 않음 (class="") 
따라서 출력 결과는 위와 같음 버튼 2(#testBtn2) 클릭 이벤트 : $('#testDiv')의 class 속성 값을 "addClass"로 변경한다.
class 명이 추가 됨을 알 수 있음 
따라서 출력 결과는 다음과 같음 버튼 3(#testBtn3) 클릭 이벤트 : $('#testDiv')의 class 속성을 제거.
class 속성 제거됨 
class = "" 가 아니라 완전 제거하여 undefined 됨을 알 수 있다. 'DEV > javascript' 카테고리의 다른 글
Javascript Promise 정리 (설명을 경량화...) (0) 2022.04.08 Javascript import vs require 차이점 알아보기 (0) 2022.04.01 Javascript reduce 사용법 (0) 2022.03.17 Javascript 숫자인지 판별하기 (0) 2022.03.16 Javascript 문자열이 날짜 형식인지 확인하기 (0) 2022.03.16