(html) data-* attributes 사용하기

-html5 에서 지원하는 기능.

- data-* 를 사용하면 html 에서 id, name, class, vlaue 외에도 다른 속성을 커스텀해서 쓸 수 있다.

사용법. 

// HTML  
<article
  id="electric-cars"
  data-columns="3"
  data-index-number="12314"
  data-parent="cars">
...
</article>

//JavaScript 
const article = document.querySelector('#electric-cars');
// The following would also work:
// const article = document.getElementById("electric-cars")

article.dataset.columns // "3"
article.dataset.indexNumber // "12314"
article.dataset.parent // "cars"

//JQuery 를 사용한다면 아래처럼도 사용가능.
$("#electric-cars").data("parent") //"cars"

//CSS 
article::before {
  content: attr(data-parent);
}
article[data-columns='3'] {
  width: 400px;
}
article[data-columns='4'] {
  width: 600px;
}

 

출처: https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

 

- 나는 서버에서 받아오는 list 를 뿌려줄 때, value 외의 값도 담아뒀다가 js 에서 사용하고싶어서 추가했다

// data-name 사용 전.

//html
<select id="srcSite">
	<option value="">전 체</option>
    <c:forEach var="site" items="${siteList}">
    <option value="${site.site_id}_${site.site_name}" <c:if test="${actionForm.srcSiteId eq site.site_id}">selected</c:if>>${site.site_name} (${site.site_id})</option>
    </c:forEach>
</select>

// js(JQeury)
let site = $("#srcSite").val().split("_");
let siteId = site[0];
let siteName = site[1];

//data-name 사용 후

//html
<select id="srcSite">
	<option value="">전 체</option>
    <c:forEach var="site" items="${siteList}">
    	<option value="${site.site_id}" data-name="${site.site_name}" <c:if test="${actionForm.srcSiteId eq site.site_id}">selected</c:if>>${site.site_name} (${site.site_id})</option>
    </c:forEach>
</select>

// js(JQuery)
let siteId = ($"#srcSite").val();
let siteName = $("#srcSite").find("option:selected").data("name");