HTML5本身不提供attr()方法，这是jQuery的DOM操作函数；纯JavaScript中应使用dataset读取data-属性，再通过style.border或classList控制边框样式。
HTML5里没有attr()方法
直接说结论：HTML5 本身不提供 attr() 方法，这是 jQuery 的 DOM 操作函数。纯 HTML/JavaScript 中不存在这个 API。如果你在查“HTML5 用 attr() 绑定数据做边框”，大概率是混淆了技术栈——实际要解决的，是「如何用 JavaScript 动态设置元素边框样式」，而误用了 jQuery 术语。
jQuery 的 attr() 不能设边框样式
attr() 用于操作 HTML 属性（如 id、data-* 、src），不是 CSS 样式。边框属于表现层，必须走 style 或 class 控制。常见错误写法：
$('div').attr('style', 'border: 2px solid red');这看似能用，但本质是覆盖整个 style 属性，会清掉其他内联样式（比如已有的 color 或 margin）。真正安全的做法是用 css()：
$('div').css('border', '2px solid red');-
css()只改指定 CSS 属性，不影响其他样式 - 若想绑定数据驱动边框（比如根据
data-border-type切换样式），应读取data-属性再调用css() - 注意：jQuery 3.0+ 中
attr('style')返回的是字符串，不可靠；优先用css()
原生 JS 怎么根据 data 属性动态设边框
用 dataset 读取 data- 值，再通过 style.border 或 classList 控制。例如：
立即学习“前端免费学习笔记（深入）”；
内容
const el = document.querySelector('div');
const type = el.dataset.border || 'solid';
const width = el.dataset.width || '1';
el.style.border = `${width}px ${type} #333`;- 避免直接拼接字符串设
style，尤其当值来自用户输入时（XSS 风险） - 更健壮的做法是预定义 CSS 类：
.border-dashed-3 { border: 3px dashed #333; }，然后用el.classList.add() -
dataset自动驼峰化（data-border-color→el.dataset.borderColor），注意命名一致性
为什么别用 attr() 存边框配置
把边框参数塞进 attr()（比如 attr('data-border', '2px solid blue')）看似方便，但有硬伤：
- 语义错误：
data-属性本意是存结构化元数据，不是样式指令 - 维护困难：样式逻辑散落在 HTML 属性和 JS 里，改边框要同步两处
- 无法利用 CSS 级联和媒体查询（比如响应式边框粗细）
- 服务端渲染或 SSR 场景下，
data-值可能被提前序列化，但样式未生效
真正该做的，是把数据存在 data- 里（如 data-status="error"），再用 CSS 规则匹配：[data-status="error"] { border: 2px solid #f00; } —— 这才是 HTML5 + CSS 的正解。
