如何根据屏幕大小响应地更改HTML5数据属性值

@media screen and (max-width: 768px) {
  /* 在屏幕宽度小于等于768px时应用的样式 */
  .element {
    /* 更改HTML5数据属性值 */
    data-attribute: value1;
  }
}

@media screen and (min-width: 769px) {
  /* 在屏幕宽度大于769px时应用的样式 */
  .element {
    /* 更改HTML5数据属性值 */
    data-attribute: value2;
  }
}

window.addEventListener('resize', function() {
  var screenWidth = window.innerWidth;
  if (screenWidth <= 768) {
    // 在屏幕宽度小于等于768px时更改HTML5数据属性值
    document.getElementById('element').setAttribute('data-attribute', 'value1');
  } else {
    // 在屏幕宽度大于768px时更改HTML5数据属性值
    document.getElementById('element').setAttribute('data-attribute', 'value2');
  }
});