JavaScript DOM 入门：操纵标签属性与样式全指南

作为前端开发的基础DOM文档对象模型操作是实现页面交互的核心。今天我们就从「操纵标签属性」和「操纵标签样式」两大核心点入手把课堂笔记里的知识点梳理成一篇好懂、好用的博客帮你彻底搞懂这些基础又关键的操作一、操纵标签属性给标签 “改头换面”在 JS 中我们可以直接通过 DOM 对象来读取或修改 HTML 标签的属性语法简单直接核心就两个操作设置属性和获取属性值。1. 基础语法规则设置标签属性标签对象.属性名 值;获取标签属性值var 变量 标签对象.属性名;⚠️ 注意属性名必须采用小驼峰命名法比如fontSize、offsetLeft不能和 HTML 原生属性名直接混用否则会报错。2. 高频实用属性详解1offset 系列属性获取标签的位置与尺寸这组属性是 JS 中获取元素几何信息的利器而且是只读属性只能获取不能直接修改非常适合做页面布局和交互计算offsetLeft获取标签左侧到父元素的距离左边距offsetTop获取标签顶部到父元素的距离上边距offsetWidth获取标签的宽度包含边框、内边距offsetHeight获取标签的高度包含边框、内边距举个例子想获取一个 id 为box的 div 的宽度// 先获取标签对象 var box document.getElementById(box); // 获取宽度并打印 var boxWidth box.offsetWidth; console.log(boxWidth);2标签内容属性修改 / 读取标签内部的内容这两个属性专门用来处理标签里的文本和 HTML 代码注意只有双标签比如 div、p、span才有这两个属性innerHTML可以设置或获取标签内部的 HTML 内容支持解析 HTML 标签比如b加粗文字/binnerText只能设置或获取标签内部的纯文本内容会自动过滤掉 HTML 标签简单对比一下两者的区别var demo document.getElementById(demo); // 使用innerHTML会解析HTML标签文字会加粗 demo.innerHTML b我是加粗的文字/b; // 使用innerText只会显示纯文本不会解析标签 demo.innerText b我是普通文字/b;二、操纵标签样式让页面 “动起来”如果说属性操作是给标签 “换配置”那样式操作就是给标签 “换衣服”我们主要通过两种方式来修改标签的样式直接修改行内样式或者修改类名来复用 CSS 样式。1. 直接修改 style 属性快速设置行内样式通过标签对象.style可以直接修改标签的行内样式优先级比 CSS 类名更高适合临时修改样式的场景。语法与示例语法标签对象.style.样式名 样式值;示例给 id 为box的 div 设置宽度和背景色var box document.getElementById(box); // 设置宽度 box.style.width 200px; // 设置背景色 box.style.backgroundColor skyblue; // 设置文字大小注意小驼峰命名不是font-size box.style.fontSize 16px;⚠️ 小细节CSS 里的连字符样式名比如background-color在 JS 中要改成小驼峰命名法backgroundColor否则会报错。2. 修改 className 属性复用 CSS 类名如果要修改的样式很多直接写 style 会让代码变得很臃肿这时候就可以通过修改className来切换 CSS 类名复用提前写好的样式。语法与示例语法标签对象.className 类名;示例给 div 添加一个提前写好的样式类css/* 提前在CSS里写好样式 */ .box-style { width: 200px; height: 200px; background: pink; border-radius: 10px; }var box document.getElementById(box); // 给div添加类名自动应用所有样式 box.className box-style;3. this 关键字简化当前对象的操作在事件函数中this专门指向当前触发事件的标签对象可以直接用它来修改当前标签的属性和样式不用重复获取标签对象代码会更简洁。举个例子点击按钮时修改按钮本身的样式// 获取按钮对象 var btn document.getElementById(btn); // 给按钮添加点击事件 btn.onclick function() { // this 就是当前点击的btn对象 this.style.backgroundColor orange; this.className active-btn; }三、补充事件冒泡与阻止冒泡在操作标签样式时我们经常会遇到「事件冒泡」的问题给父标签和子标签都添加了点击事件点击子标签时父标签的事件也会被触发。比如下面这个结构div idparent button idchild点击我/button /divvar parent document.getElementById(parent); var child document.getElementById(child); parent.onclick function() { alert(父标签被点击了); } child.onclick function(e) { alert(子标签被点击了); // 阻止事件冒泡父标签的事件就不会触发了 e.stopPropagation(); }通过e.stopPropagation()可以阻止事件向上冒泡避免不必要的事件触发是 DOM 交互中非常实用的技巧。四、总结DOM 操作的核心要点属性操作核心是标签对象.属性名offset 系列只读innerHTML/innerText 处理内容注意小驼峰命名。样式操作两种方式 ——style.样式名直接改行内样式className切换 CSS 类名前者适合临时修改后者适合复用样式。简化技巧事件中用this指向当前对象减少重复代码用e.stopPropagation()解决事件冒泡问题。这些都是 JS DOM 的基础操作也是前端交互的基石多写几个小例子练手很快就能熟练掌握啦