<!DOCTYPE html>
<html lang="ko" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>JavaScript-Sample</title>
    <script type="text/javascript" def src="document.js"></script>
  </head>
  <body>
    <button id="user" data-id="3" data-user="johndoe" data-date-of-birth>click</button>
  </body>
</html>
button::after {
  content: attr(data-id);
}

#user[data-id='3'] {
  width: 300px;
}
#user[data-id='4'] {
  width: 400px;
}
const btn = document.querySelector('#user');

function changeId(event) {
  if(event.target.dataset.id == 3) {
    btn.dataset.id = 4;
  } else {
    btn.dataset.id = 3;
  }
}

btn.addEventListener('click', changeId);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.