JavaScript DOM 原生部分(三):元素属性修改

在 JavaScript 中,修改 DOM 元素的属性是操作网页元素的重要环节,不同类型的属性(标准 HTML 属性、自定义属性、样式属性)有不同的修改方式.

一.修改标准 HTML 内置属性

如:src、href、id、class、disabled.

这类属性是 HTML 元素的固有属性,可通过元素对象直接访问或使用setAttribute/getAttribute方法操作.

1.直接通过属性名操作( 推荐,更简洁 )

适用于大部分常用标准属性,如src、href、id、value、disabled等.

// HTML: <img id="img" src="old.jpg" alt="旧图片">constimg=document.getElementById('img');// 修改 src 属性img.src='new.jpg';// 修改 alt 属性img.alt='新图片';// HTML: <a id="link" href="https://old.com">旧链接</a>constlink=document.getElementById('link');link.href='https://new.com';link.title='新链接的标题';// 鼠标悬浮提示// 表单元素属性: 禁用输入框// HTML: <input type="text" id="input" disabled="false">constinput=document.getElementById('input');input.disabled=true;// 禁用(布尔值,直接赋值)input.readOnly=true;// 设置为只读

2.使用 setAttribute() / getAttribute() ( 通用方法 )

适用于所有 HTML 属性(包括部分直接访问不生效的属性),参数为属性名的字符串形式.

• setAttribute(属性名, 属性值): 设置属性值
• getAttribute(属性名): 获取属性值
• removeAttribute(属性名): 移除属性

// HTML: <div id="box" class="old-class">constbox=document.getElementById('box');// 设置 class 属性(也可直接用 box.className)box.setAttribute('class','new-class');// 获取 class 属性console.log(box.getAttribute('class'));// "new-class"// 设置>.setAttribute('data-index','2');// 移除 disabled 属性input.removeAttribute('disabled');

二.修改样式属性( style / classList )

样式属性分为行内样式和类样式,推荐优先使用类样式(便于维护和复用).

1.修改行内样式( element.style )

直接操作元素的行内样式,优先级高于外部样式表.

// HTML: <div id="box" style="color: red;">测试</div>constbox=document.getElementById('box');// 修改单个行内样式(注意: CSS 属性名转为驼峰命名,如 background-color → backgroundColor)box.style.color='blue';box.style.fontSize='16px';box.style.backgroundColor='#f5f5f5';// 批量设置行内样式(通过 cssText)box.style.cssText='color: green; font-size: 18px; margin-top: 10px;';

2.修改类样式( classList ,推荐)

通过操作 CSS 类来修改样式,更符合结构与样式分离的原则.
classList提供了以下方法:

• add(className): 添加类
• remove(className): 移除类
• toggle(className): 切换类(存在则移除,不存在则添加)
• contains(className): 判断是否包含类(返回布尔值)

/* CSS 样式 */.active{color:red;font-weight:bold;}.hide{display:none;}

// HTML: <div id="box" class="old-class">测试</div>constbox=document.getElementById('box');// 添加类box.classList.add('active');// 结果: class="old-class active"// 移除类box.classList.remove('old-class');// 结果: class="active"// 切换类(点击时常用)box.classList.toggle('hide');// 存在 hide 则移除,否则添加// 判断是否包含类if(box.classList.contains('active')){console.log('包含 active 类');}// 一次性添加/移除多个类box.classList.add('class1','class2');box.classList.remove('class1','class2');

三.修改自定义数据属性(data-*)

HTML5 支持通过data-*定义自定义属性,可通过元素的dataset属性便捷操作(无需写data-前缀).

// HTML: <div id="box">constbox=document.getElementById('box');// 获取自定义属性(dataset 是对象,属性名转为驼峰:>.log(box.dataset.id);// "10"console.log(box.dataset.userName);// "张三"// 修改自定义属性box.dataset.id=20;box.dataset.userName='李四';box.dataset.age=25;// 新增自定义属性>// 移除自定义属性(直接 delete)deletebox.dataset.age;

四.特殊属性的修改

1.class属性的特殊处理

除了setAttribute('class', ...)和classList,也可通过className直接赋值(会覆盖原有类):

box.className='new-class1 new-class2';// 覆盖所有类,多个类用空格分隔

2.checked属性(复选框/单选框)

// HTML: <input type="checkbox" id="checkbox" checked>constcheckbox=document.getElementById('checkbox');checkbox.checked=false;// 取消选中

3.selected属性(下拉选项)

// HTML:// <select id="city">// <option value="beijing">北京</option>// <option value="shanghai" selected>上海</option>// </select>constoption=document.querySelector('#city option[value="beijing"]');option.selected=true;// 选中北京

注意事项

1. attr()和prop()的选择原则

   • 对于布尔值属性(checked、disabled、selected),必须用prop(),因为attr()获取的是标签上的初始值,而prop()获取的是元素的实时状态.
   • 示例: 复选框被用户点击后,attr('checked')仍返回checked(初始值),而prop('checked')返回true/false(实时状态).

2. 样式属性的命名规范

   • 原生 JS 中,CSS 连字符属性(如background-color)需转为驼峰命名(backgroundColor);

3. 自定义属性的最佳实践

   • 推荐使用data-*自定义属性(HTML5 标准),通过dataset或data()操作,避免直接添加非标准属性.

4. 元素存在性检查

   • 修改属性前检查元素是否存在,避免报错:

     constbox=document.getElementById('box');if(box){box.dataset.id=100;}

5. 只读属性的限制

   • 部分属性为只读(如<input type="file">的value、window.location的href部分场景),无法通过 JavaScript 修改.

总结

• 原生 JS 中,优先通过元素对象直接访问标准属性,用classList操作类样式,用dataset操作自定义属性;
• 核心是根据属性类型(标准/布尔/自定义/样式)选择合适的方法,兼顾代码的可读性和性能.