本文介绍如何使用原生 JavaScript 在页面加载和窗口缩放时，自动为 <nav> 元素添加或移除 data-navigation 属性（仅当视口宽度小于 768px 时生效），避免依赖 jQuery，提升性能与兼容性。
本文介绍如何使用原生 javascript 在页面加载和窗口缩放时，自动为 `
在响应式开发中，有时需根据设备视口尺寸为元素动态注入语义化 data 属性（如 data-navigation），以便后续 CSS 样式控制或 JavaScript 逻辑分支判断。关键在于：必须同时监听初始加载和窗口缩放事件，并使用标准 DOM 方法操作属性。
你原先的代码存在几个典型问题：
- $("nav").setAttribute(...) 是错误写法 —— jQuery 对象没有 setAttribute 方法，应使用 .attr() 或转为原生 DOM 元素；
- $(window).width() 返回的是内容区域宽度，而判断断点应使用 window.innerWidth（含滚动条）或 document.documentElement.clientWidth（更精确）；
- 缺少首次加载时的初始化检查，导致页面刚打开时不触发。
✅ 正确做法是使用原生 addEventListener 绑定 resize 事件，并在 window.onload 时立即执行一次检测，确保首屏渲染即生效：
window.addEventListener('resize', checkScreenSize);
window.onload = () => {
checkScreenSize();
};
function checkScreenSize() {
const nav = document.querySelector('nav');
if (!nav) return; // 安全防护：确保元素存在
if (window.innerWidth < 768) {
nav.setAttribute('data-navigation', ''); // 值可为空字符串，HTML 中将显示为 data-navigation=""
} else {
nav.removeAttribute('data-navigation');
}
}? 注意事项：
立即学习“前端免费学习笔记（深入）”；
- window.innerWidth 包含垂直滚动条宽度，若需更精确的“可视区域宽度”，可用 document.documentElement.clientWidth；
- 避免频繁触发重排，本例仅操作属性，无性能风险；但若逻辑复杂，建议添加防抖（debounce）；
- CSS 中可通过 [data-navigation] 选择器精准匹配，例如：
[data-navigation] { background-color: #daa520; padding: 1rem; }
? 扩展提示：如需支持多个断点（如 mobile/tablet/desktop），可将阈值抽象为配置对象，配合 matchMedia() 实现更优雅的媒体查询监听，进一步提升可维护性。
