为 HTML 元素根据屏幕尺寸动态添加或移除 data 属性-html教程-PHP中文网

为 HTML 元素根据屏幕尺寸动态添加或移除 data 属性

本文介绍如何使用原生 JavaScript 在页面加载和窗口缩放时，自动为元素添加或移除 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 时立即执行一次检测，确保首屏渲染即生效：

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

window.addEventListener('resize', checkScreenSize);
window.onload = () => {
  checkScreenSize();
};

function checkScreenSize() {
  const nav = document.querySelector('nav');
  if (!nav) return; // 安全防护：确保元素存在

  if (window.innerWidth <p>? <strong>注意事项：</strong></p>

window.innerWidth 包含垂直滚动条宽度，若需更精确的“可视区域宽度”，可用 document.documentElement.clientWidth；
避免频繁触发重排，本例仅操作属性，无性能风险；但若逻辑复杂，建议添加防抖（debounce）；
CSS 中可通过 [data-navigation] 选择器精准匹配，例如：
```
[data-navigation] {
  background-color: #daa520;
  padding: 1rem;
}
```

? 扩展提示：如需支持多个断点（如 mobile/tablet/desktop），可将阈值抽象为配置对象，配合 matchMedia() 实现更优雅的媒体查询监听，进一步提升可维护性。