如何根据屏幕尺寸为HTML元素添加data属性？现有代码失效求助

一、原代码失效原因 #

你直接在jQuery对象上调用了原生DOM的setAttribute()和removeAttribute()方法，这是无效的——jQuery对象和原生DOM元素属于不同类型，不能混用原生DOM方法。

二、修正后的jQuery代码 #

将原生方法替换为jQuery对应的attr()和removeAttr()，同时把重复逻辑封装成函数，避免冗余代码：

// 封装属性处理逻辑
function handleNavigationAttr() {
  if ($(window).width() < 768) {
    $("nav").attr('data-navigation', ''); // 空值即可生成无值属性
  } else {
    $("nav").removeAttr('data-navigation');
  }
}

// 页面加载时立即执行一次
handleNavigationAttr();

// 监听窗口尺寸变化
$(window).resize(handleNavigationAttr);

注：attr('data-navigation', '')会生成<nav data-navigation>这种符合需求的无值属性。

三、更高效的原生JS方案（无需jQuery） #

使用原生matchMediaAPI性能更优，它只会在屏幕尺寸跨越768px断点时触发回调，避免resize事件的高频触发：

// 创建媒体查询对象，匹配小于768px的屏幕
const mediaQuery = window.matchMedia('(max-width: 767px)');

// 处理属性的核心函数
function updateNavigationAttr(e) {
  const nav = document.querySelector('nav');
  if (e.matches) {
    nav.setAttribute('data-navigation', '');
  } else {
    nav.removeAttribute('data-navigation');
  }
}

// 初始加载时执行一次
updateNavigationAttr(mediaQuery);

// 监听媒体查询状态变化
mediaQuery.addEventListener('change', updateNavigationAttr);

四、额外提示 #

如果你的需求仅为基于屏幕尺寸控制样式，完全可以不用JS，直接用CSS媒体查询实现：

/* 屏幕小于768px时的样式 */
@media (max-width: 767px) {
  nav {
    /* 写入对应样式规则 */
  }
}

/* 屏幕大于等于768px时的样式 */
@media (min-width: 768px) {
  nav {
    /* 写入对应样式规则 */
  }
}

只有当必须通过data-navigation属性实现JS逻辑时，再使用上述JS方案。

内容的提问来源于stack exchange，提问作者barsug