Data Attributes

요소에 자신만의 데이터 속성을 넣고 싶을때 사용한다.
"data-" 시작하는 속성은 유저 데이터로 취급한다.

사용 방법은 다음과 같다.

HTML에서

<p id='greeting' data-color='red' data-lang-kr='안녕' data-lang-un='Hi~~'  data-lang-jp='こんにちは'>Hi!!!</p>

CS에서

#greeting::before {
    content: attr(data-lang-kr);
}

#greeting[data-color='red'] {
    color: rgb(255, 0, 0);
}

자바스크립트에서 읽기 쓰기

읽기

dataset.langKr     <--  두번째 '-'로 시작되는 문자는 대문자로 적어줘야 작동하네.
dataset['langJp']   <-- 여기두 그렇네
getAttribute('data-lang-un' );

쓰기

setAttribute('data-lang-kr', '반가워');

test.html 파일
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
</head>
<style>
        #greeting::before {
            content: attr(data-lang-kr);
        }
        
        #greeting[data-color='red'] {
            color: rgb(255, 0, 0);
        }
        
</style>
<body>
<p id='greeting' data-color='red' data-lang-kr='안녕' data-lang-un='Hi~~'  data-lang-jp='こんにちは'>Hi!!!</p>
    
<script type='text/javascript' src='main.js'></script>
<script>
window.addEventListener('DOMContentLoaded', function(){
    Main.init();
});                                   
</script>        
</body>
</html>

main.js 파일
var Main = (function () {
   
    function init()
    {
        var element = document.getElementById('greeting');
        element.setAttribute('data-lang-kr', '반가워');

        element.textContent = element.textContent
                   + ' = ' + element.dataset.langKr
                    + ' : ' + element.dataset['langJp']
                   + ' : ' + element.getAttribute('data-lang-un' );
    }
   
    return {
        init: init,
    };   
})();

1.  data-lang-kr 문자열을 '반가워'로 바꾼다.
    element.setAttribute('data-lang-kr', '반가워');

2. 스타일 before은 content 앞에 데이터 속성 data-lang-kr = "반가워"를 추가한다.

        #greeting::before {
            content: attr(data-lang-kr);
        }
추가하면 결과는 "반가워Hi!!!"이다.

3. 이전 텍스트 내용 :  dataset.langKr  : dataset.langJp : data-lang-un 언어별로 출력한다.

반가워Hi!!! = 반가워 : こんにちは : Hi~~

Data Attriubutes querySelector

데이터 속성을 querySelector 하는 방법은 다음과 같다.
let el = document.querySelector('div[data-number=atext]');

물론 다음과 같이 해도 잘된다.
let el = document.querySelector('[data-number=atext]');


<div id='aaa' data-number='atext'>aaa<div>   
<div id='bbb' data-number='btext'>bbb<div>  

<script>
window.addEventListener('DOMContentLoaded', function(){
    let ela = document.querySelector('div[data-number=atext]');
    console.log(ela.id);

    let str = 'btext';
    let elb = document.querySelector(`div[data-number=${str}]`);
    console.log(elb.id);
});                                  
</script>

결과)
aaa
bbb

마우스 클릭시 이미지 사이즈를 1, 0.5 크기로 반복하는 스크립트 예제

시작시 이미지 사이즈를  0.5로 모두 바꾼다.
마우스로 클릭한 이미지 사이즈를 1로 변환한다.
다시 마우스로 클릭하면 이미지 사이즈를 0.5로 변환한다.

<script language="JavaScript">

var images = document.getElementsByTagName('img');

for(var i = 0; i < images.length; i++)
{
    images[i].style.width = images[i].width/2 + 'px';
    images[i].style.height = images[i].height/2 + 'px';
    images[i].addEventListener("click", ChangeImageSize.bind(images[i]), false);
    images[i].setAttribute('data-imageSize', '0.5');
}

function ChangeImageSize(){
    imageSize = this.getAttribute('data-imageSize')

    width = this.width;
    height = this.height;

    if(imageSize == '1')
    {
        this.setAttribute('data-imageSize', '0.5');
        width = width/2;
        height = height/2;
    }
    else
    {
        this.setAttribute('data-imageSize', '1');
        width = width*2;
        height = height*2;
    }

    this.style.width = width + 'px';
    this.style.height = height + 'px';
}

</script>

HTML에 "data-" 속성이 없이 자바 스크립트에서 setAttribute 함수로 만들어도 잘 된다.

images[i].setAttribute('data-imageSize', '0.5');


참조)
http://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
http://johnresig.com/blog/html-5-data-attributes/
http://ismydream.tistory.com/m/89
http://tonks.tistory.com/147
http://www.google.co.kr/amp/www.bsidesoft.com/%3fp=888&
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_global_data
http://www.zerocho.com/category/HTML/post/5a76d1eaabd090001b981ba6

데이터 속성 querySelector
https://stackoverflow.com/questions/14809528/why-does-js-code-var-a-document-queryselectoradata-a-1-cause-error