wiki:html:data-_속성의_값_출력하기

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

차이 보기로 링크

--- wiki:html:data-_속성의_값_출력하기 [2020/04/29 18:57]
jskim
+++ wiki:html:data-_속성의_값_출력하기 [2023/01/13 18:44] (현재)
@@ 줄 1: / 줄 1: @@
 ===== data-* 속성의 값 출력하기 =====
->속성을 data-job-cd 로 지정한 후 console에 출력
+>속성을 data-job-cd 로 지정한 후 console에 출력.
 <code html>
 <c:forEach items="${resultInfo}" var="resultInfo" varStatus="status">
-   <tr>
+    <button class = "test" data-job-cd = "${resultInfo.jobCd }">
-      <td>
+       TEST BUTTON
-         <button class="test" data-job-cd="${resultInfo.jobCd }">
+    </button>
-	 TEST BUTTON
-	 </button>
-      </td>
-   </tr>
 </c:forEach>
 </code>
 <code javascript>
-console.log( $(this).data('jobCd') );
+console.log( $(this).data('jobCd') );  //정상출력
-console.log( $(this).data('jobcd') );
+console.log( $(this).data('jobcd') );  //정상출력
-console.log( $(this)[0].dataset.jobcd );
+console.log( $(this)[0].dataset.jobcd );  //정상출력
-console.log( $(this)[0].dataset.jobCd );
+console.log( $(this)[0].dataset.jobCd );  //정상출력
+</code>\\
+>속성을 data-jobCd 로 지정한 후 console에 출력
+<code html>
+<c:forEach items="${resultInfo}" var="resultInfo" varStatus="status">
+    <button class = "test" data-jobCd = "${resultInfo.jobCd }">
+       TEST BUTTON
+    </button>
+</c:forEach>
 </code>
+<code javascript>
+console.log( $(this).data('jobCd') );  //undefined
+console.log( $(this).data('jobcd') );  //정상출력
+console.log( $(this)[0].dataset.jobcd );  //정상출력
+console.log( $(this)[0].dataset.jobCd );  //undefined
+</code>
+  * data속성명에 camelCase를 사용할 경우 유의해야 함.

/var/services/web/dokuwiki/data/attic/wiki/html/data-_속성의_값_출력하기.1588154249.txt.gz · 마지막으로 수정됨: 2022/03/10 19:52 (바깥 편집)