HTML全局属性在JS脚本中获取与修改的实例-html教程-PHP中文网

js读取和修改html全局属性应优先直接操作dom属性：id、classname、title、lang、hidden等可直赋值，class需用classname（非class），hidden等布尔属性设true/false，data-*须用dataset或getattribute/setattribute。

html全局属性在js脚本中获取与修改的实例

怎么用 JS 读取和改写 HTML 元素的全局属性（如 id、class、title）

全局属性（id、class、title、lang、hidden 等）可直接通过 DOM 元素对象的对应属性访问或赋值，无需走 getAttribute/setAttribute 流程——这是最简、最稳的方式。

比如：document.getElementById("btn").id = "newBtn" 会立刻更新 DOM 中的 id 属性，并同步影响 CSS 选择器和 getElementById 查找结果；element.className = "active warning" 会完整替换 class 列表；element.title = "点击查看详情" 会实时生效为鼠标悬停提示。

注意点：

class 对应的是 className 属性（不是 class），这是历史遗留命名，别写成 element.class = "..." —— 会静默失败
hidden 是布尔属性，设为 true 或 false 即可，不用传字符串 "true"
contenteditable 同样是布尔属性，但需用 element.contentEditable = "true"（注意大小写和字符串值），因为它的 DOM 属性名是 contentEditable，且接受字符串 "true"/"false"/"plaintext-only"

data-* 自定义属性必须用 dataset 或 getAttribute/setAttribute

像 data-user-id、data-status 这类以 data- 开头的属性，不能直接用 element.dataUserId 访问——DOM 不会自动映射为驼峰属性。必须走标准化接口。

推荐优先用 dataset：

读取：element.dataset.userId → 对应 HTML 中的 data-user-id
写入：element.dataset.status = "loaded" → 自动转成 data-status="loaded"
删除：delete element.dataset.userId

如果需要兼容老浏览器（IE10 及以下），或要处理含非法字符的 key（如 data-foo.bar），就退回 getAttribute/setAttribute：

Wjs Localizing Video

用于端到端视频本地化流程的轻量编排器，路由至四个专注子技能——/wjs-transcribing-audio、/wjs-translating-subtitles...

下载

element.getAttribute("data-user-id")
element.setAttribute("data-timestamp", Date.now().toString())

修改 href、src、value 等“反射属性”要区分语义和实际值

某些属性（如 href、src、value、checked）在 DOM 元素上存在“反射行为”：它们既是 HTML 属性，又是 JS 属性，但含义不同。

例如：

element.href 返回**解析后的绝对 URL**（即使 HTML 写的是相对路径 href="page.html"，JS 读出来也是 https://site.com/page.html）
想读原始 HTML 值，得用 element.getAttribute("href")
input.value 反映的是**当前用户输入值**，而 input.getAttribute("value") 只读取初始声明值（HTML 中写的 value="default"）
所以动态改用户可见值，永远用 input.value = "new"；想重置回初始值，才用 input.setAttribute("value", "new") 再触发一次 reset 行为