文章目录一、DOM 属性操作1.1 直接操作属性1.2 通用属性操作方法1.2.1 getAttribute()1.2.2 setAttribute()1.2.3 removeAttribute()1.3 数据属性data-*1.4 class 属性的特殊处理1.4.1 className1.4.2 classList1.4.2.1 classList.add() 添加类1.4.2.2 classList.remove() 移除类1.4.2.3 classList.toggle() 切换类1.4.2.4 classList.replace() 替换类1.4.2.5 遍历类列表二、DOM 样式操作2.1 内联样式style 属性2.2 获取计算样式getComputedStyle2.3 通过修改 class 切换样式一、DOM 属性操作元素的属性如id、class、src、href等是 DOM 操作的重要部分JavaScript 提供了多种方法来操作这些属性。1.1 直接操作属性对于元素的标准属性可以直接通过元素对象的属性进行访问和修改。初始状态imgidmyImgsrcimg/blue.jpgalt示例图片classimg-responsivescriptconstimgdocument.getElementById(myImg);// 读取属性console.log(img.id);// myImgconsole.log(img.src);// 127.0.0.1:5500/test/img/blue.jpg绝对路径console.log(img.alt);// 示例图片console.log(img.className);// img-responsive注意是className不是class/script修改新增属性后imgidmyImgsrcimg/blue.jpgalt示例图片classimg-responsivescriptconstimgdocument.getElementById(myImg);// 读取属性console.log(img.id);// myImgconsole.log(img.src);// 127.0.0.1:5500/test/img/blue.jpg绝对路径console.log(img.alt);// 示例图片console.log(img.className);// img-responsive注意是className不是class// 修改属性img.srcimg/Adele.jpg;img.alt新图片;img.classNameimg-large;console.log(img.src);// http://127.0.0.1:5500/test/img/Adele.jpg绝对路径console.log(img.alt);// 新图片console.log(img.className);// img-large// 添加新属性img.title这是一张图片;// 会添加title属性/script注意事项属性名在 JavaScript 中使用驼峰命名法如className对应class属性src、href等属性返回的是绝对路径而getAttribute返回的是 HTML 中设置的原始值对于自定义属性直接访问会返回undefined除非使用data-*属性1.2 通用属性操作方法setAttribute、getAttribute和removeAttribute是操作属性的通用方法适用于所有属性包括自定义属性。1.2.1 getAttribute()获取元素指定属性的值。aidmyLinkhref/homedata-id123classactive首页/ascriptconstlinkdocument.getElementById(myLink);// 获取标准属性console.log(link.getAttribute(href));// /home原始值不是绝对路径console.log(link.getAttribute(class));// active// 获取自定义属性console.log(link.getAttribute(data-id));// 123// 获取不存在的属性console.log(link.getAttribute(target));// null/script1.2.2 setAttribute()设置元素的属性值如果属性不存在则添加。语法element.setAttribute(attributeName, value)dividmyDiv/divscriptconstdivdocument.getElementById(myDiv);// 设置标准属性div.setAttribute(class,container);console.log(div.getAttribute(class));div.setAttribute(title,这是一个容器);console.log(div.getAttribute(title));// 设置自定义属性div.setAttribute(data-type,box);console.log(div.getAttribute(data-type));// 设置布尔属性如 disabled、checked等// 只要存在该属性不管值是什么都会生效constbuttondocument.createElement(button);button.setAttribute(disabled,disabled);// 禁用按钮button.setAttribute(disabled,false);// 仍然禁用只要属性存在/script1.2.3 removeAttribute()移除元素的指定属性。初始状态inputtypetextidmyInputdisabledvalue不可编辑scriptconstinputdocument.getElementById(myInput);console.log(input.disabled);// true/script移除disabled后inputtypetextidmyInputdisabledvalue不可编辑scriptconstinputdocument.getElementById(myInput);console.log(input.disabled);// true// 移除disabled属性input.removeAttribute(disabled);input.setAttribute(value,可编辑)console.log(input.disabled);// false输入框变为可编辑/script1.3 数据属性data-*HTML5 引入了data-*属性用于存储自定义数据通过元素的dataset属性可以方便地访问这些数据。dividuserdata-id1001data-user-name张三data-age25data-is-viptrue/divscriptconstuserdocument.getElementById(user);// 访问data属性使用datasetconsole.log(user.dataset.id);// 1001console.log(user.dataset.userName);// 张三注意驼峰命名console.log(user.dataset.age);// 25字符串类型console.log(user.dataset.isVip);// true字符串类型// 转换类型constageNumber(user.dataset.age);constisVipuser.dataset.isViptrue;// 设置data属性user.dataset.emailzhangsanexample.com;user.dataset.userName李四;// 修改属性// 删除data属性deleteuser.dataset.age;// 通过getAttribute/setAttribute操作console.log(user.getAttribute(data-id));// 1001user.setAttribute(data-address,北京);/script特点data-前缀后的部分会转换为驼峰命名法如data-user-name对应dataset.userNamedataset返回的值都是字符串类型需要时需手动转换类型适用于存储与元素相关的额外数据避免使用自定义属性可能导致的冲突1.4 class 属性的特殊处理class是 HTML 中最常用的属性之一用于指定元素的样式类。由于class是 JavaScript 的关键字DOM 中使用className和classList来操作类属性。1.4.1 classNameclassName属性用于获取或设置元素的完整类名字符串形式。dividboxclasscontainer active/divscriptconstboxdocument.getElementById(box);console.log(box.className);// container active// 替换所有类box.classNamebox hidden;console.log(box.className);// box hidden// 添加类需要手动处理空格box.className new-class;// 注意前面的空格console.log(box.className);// box hidden new-class// 移除类需要处理字符串box.classNamebox.className.replace(hidden,).trim();console.log(box.className);// box new-class中间有两个空格//正则表达式 匹配(空格)new-class(空格)box.classNamebox.className.replace(/\snew-class\s*/, ).trim();console.log(box.className);// box/scriptclassName操作简单但添加、移除特定类时需要处理字符串不够方便。1.4.2 classListclassList是一个只读属性返回元素的类名集合DOMTokenList对象提供了便捷的方法来操作类名。dividboxclasscontainer active/divscriptconstboxdocument.getElementById(box);constclassListbox.classList;// 查看类列表console.log(classList);// DOMTokenList(2) [container, active]console.log(classList.length);// 2console.log(classList.contains(active));// true是否包含某个类/script1.4.2.1 classList.add() 添加类classList.add(new-class);// 添加一个类classList.add(another-class,more-class);// 添加多个类console.log(classList);1.4.2.2 classList.remove() 移除类classList.remove(active);// 移除一个类classList.remove(another-class,more-class);// 移除多个类console.log(classList);1.4.2.3 classList.toggle() 切换类// 切换类存在则移除不存在则添加classList.toggle(hidden);// 添加hidden类console.log(classList);classList.toggle(hidden);// 移除hidden类console.log(classList);有条件的切换无论原来是否存在条件为true时强制添加条件为false时强制移除letisActivetrue;classList.toggle(highlight,isActive);console.log(classList);1.4.2.4 classList.replace() 替换类classList.replace(container,box-container);// 替换类console.log(classList);1.4.2.5 遍历类列表classList.forEach(className{console.log(className);});优点方法简洁直观无需处理字符串和空格支持添加、移除多个类toggle方法非常适合切换元素状态如激活 / 非激活二、DOM 样式操作通过 DOM 可以动态修改元素的样式实现交互效果如悬停、点击反馈、动画等。DOM 提供了多种操作样式的方式。2.1 内联样式style 属性元素的style属性返回一个CSSStyleDeclaration对象用于操作元素的内联样式即style属性中定义的样式。dividboxstylewidth:100px;height:100px;background-color:rgb(240,176,176);/divscriptconstboxdocument.getElementById(box);conststylebox.style;// 读取内联样式console.log(style.width);// 100pxconsole.log(style.backgroundColor);// rgb(240, 176, 176)注意驼峰命名// 修改样式style.width200px;style.backgroundColorrgb233150222;style.border2px solid black;style.fontSize16px;// 添加样式style.margin10px;style.borderRadius10px;// 移除样式设置为空字符串style.border;// 使用CSSText一次性设置多个样式style.cssTextwidth: 150px; height: 150px; border-radius: 5px; background-color:#126607;;// 注意style属性只能访问内联样式不能获取外部样式表或内部样式表中定义的样式console.log(style.margin);// 如果未在style属性中定义/script注意事项CSS 属性名在 JavaScript 中使用驼峰命名法如background-color→backgroundColorfloat属性在 JavaScript 中需使用cssFloat所有样式值都是字符串类型需要时需手动转换如parseInt(style.width)style属性只能操作内联样式无法获取外部样式表中定义的样式2.2 获取计算样式getComputedStylewindow.getComputedStyle()方法用于获取元素的计算样式最终应用在元素上的所有样式包括内联样式、内部样式表和外部样式表。style#box{color:blue;font-size:14px;}/styledividboxstylewidth:100px;Hello World/divscriptconstboxdocument.getElementById(box);// 获取计算样式constcomputedStylewindow.getComputedStyle(box);// 读取计算样式console.log(computedStyle.width);// 100px来自内联样式console.log(computedStyle.color);// rgb(0, 0, 255)来自样式表console.log(computedStyle.fontSize);// 14px来自样式表console.log(computedStyle.marginTop);// 0px默认值// 注意计算样式是只读的无法修改computedStyle.colorred;// 无效// 获取伪元素的计算样式constbeforeStylewindow.getComputedStyle(box,::before);/script特点返回的样式是最终应用在元素上的样式只读颜色值会转换为rgb或rgba格式长度值通常以px为单位即使 CSS 中使用其他单位可以获取伪元素如::before、::after的样式兼容性IE9 及以上支持IE8 及以下使用element.currentStyle兼容写法functiongetStyle(element,pseudoElement){if(window.getComputedStyle){returnwindow.getComputedStyle(element,pseudoElement);}else{// IE8及以下returnelement.currentStyle;}}2.3 通过修改 class 切换样式相比直接操作style属性通过修改元素的class来切换样式是更推荐的做法具有以下优点样式与行为分离便于维护可以一次性应用多个样式便于使用 CSS 过渡和动画style.btn{padding:8px 16px;border:none;border-radius:4px;cursor:pointer;}.btn-primary{background-color:#007bff;color:white;}.btn-primary:hover{background-color:#0056b3;}.btn-danger{background-color:#dc3545;color:white;}.btn-large{padding:12px 24px;font-size:16px;}/stylebuttonidmyBtnclassbtn btn-primary按钮/buttonscriptconstbtndocument.getElementById(myBtn);// 切换按钮样式btn.classList.remove(btn-primary);btn.classList.add(btn-danger);// 添加大尺寸样式btn.classList.add(btn-large);// 点击切换样式btn.addEventListener(click,(){btn.classList.toggle(btn-primary);btn.classList.toggle(btn-danger);});/script最佳实践尽量通过修改class来切换样式而非直接操作style属性复杂的样式变化应定义在 CSS 中通过class切换激活简单的样式调整如动态计算的位置可以使用style属性 【WEB】DOM（三）属性与样式
文章目录一、DOM 属性操作1.1 直接操作属性1.2 通用属性操作方法1.2.1 getAttribute()1.2.2 setAttribute()1.2.3 removeAttribute()1.3 数据属性data-*1.4 class 属性的特殊处理1.4.1 className1.4.2 classList1.4.2.1 classList.add() 添加类1.4.2.2 classList.remove() 移除类1.4.2.3 classList.toggle() 切换类1.4.2.4 classList.replace() 替换类1.4.2.5 遍历类列表二、DOM 样式操作2.1 内联样式style 属性2.2 获取计算样式getComputedStyle2.3 通过修改 class 切换样式一、DOM 属性操作元素的属性如id、class、src、href等是 DOM 操作的重要部分JavaScript 提供了多种方法来操作这些属性。1.1 直接操作属性对于元素的标准属性可以直接通过元素对象的属性进行访问和修改。初始状态imgidmyImgsrcimg/blue.jpgalt示例图片classimg-responsivescriptconstimgdocument.getElementById(myImg);// 读取属性console.log(img.id);// myImgconsole.log(img.src);// 127.0.0.1:5500/test/img/blue.jpg绝对路径console.log(img.alt);// 示例图片console.log(img.className);// img-responsive注意是className不是class/script修改新增属性后imgidmyImgsrcimg/blue.jpgalt示例图片classimg-responsivescriptconstimgdocument.getElementById(myImg);// 读取属性console.log(img.id);// myImgconsole.log(img.src);// 127.0.0.1:5500/test/img/blue.jpg绝对路径console.log(img.alt);// 示例图片console.log(img.className);// img-responsive注意是className不是class// 修改属性img.srcimg/Adele.jpg;img.alt新图片;img.classNameimg-large;console.log(img.src);// http://127.0.0.1:5500/test/img/Adele.jpg绝对路径console.log(img.alt);// 新图片console.log(img.className);// img-large// 添加新属性img.title这是一张图片;// 会添加title属性/script注意事项属性名在 JavaScript 中使用驼峰命名法如className对应class属性src、href等属性返回的是绝对路径而getAttribute返回的是 HTML 中设置的原始值对于自定义属性直接访问会返回undefined除非使用data-*属性1.2 通用属性操作方法setAttribute、getAttribute和removeAttribute是操作属性的通用方法适用于所有属性包括自定义属性。1.2.1 getAttribute()获取元素指定属性的值。aidmyLinkhref/homedata-id123classactive首页/ascriptconstlinkdocument.getElementById(myLink);// 获取标准属性console.log(link.getAttribute(href));// /home原始值不是绝对路径console.log(link.getAttribute(class));// active// 获取自定义属性console.log(link.getAttribute(data-id));// 123// 获取不存在的属性console.log(link.getAttribute(target));// null/script1.2.2 setAttribute()设置元素的属性值如果属性不存在则添加。语法element.setAttribute(attributeName, value)dividmyDiv/divscriptconstdivdocument.getElementById(myDiv);// 设置标准属性div.setAttribute(class,container);console.log(div.getAttribute(class));div.setAttribute(title,这是一个容器);console.log(div.getAttribute(title));// 设置自定义属性div.setAttribute(data-type,box);console.log(div.getAttribute(data-type));// 设置布尔属性如 disabled、checked等// 只要存在该属性不管值是什么都会生效constbuttondocument.createElement(button);button.setAttribute(disabled,disabled);// 禁用按钮button.setAttribute(disabled,false);// 仍然禁用只要属性存在/script1.2.3 removeAttribute()移除元素的指定属性。初始状态inputtypetextidmyInputdisabledvalue不可编辑scriptconstinputdocument.getElementById(myInput);console.log(input.disabled);// true/script移除disabled后inputtypetextidmyInputdisabledvalue不可编辑scriptconstinputdocument.getElementById(myInput);console.log(input.disabled);// true// 移除disabled属性input.removeAttribute(disabled);input.setAttribute(value,可编辑)console.log(input.disabled);// false输入框变为可编辑/script1.3 数据属性data-*HTML5 引入了data-*属性用于存储自定义数据通过元素的dataset属性可以方便地访问这些数据。dividuserdata-id1001data-user-name张三data-age25data-is-viptrue/divscriptconstuserdocument.getElementById(user);// 访问data属性使用datasetconsole.log(user.dataset.id);// 1001console.log(user.dataset.userName);// 张三注意驼峰命名console.log(user.dataset.age);// 25字符串类型console.log(user.dataset.isVip);// true字符串类型// 转换类型constageNumber(user.dataset.age);constisVipuser.dataset.isViptrue;// 设置data属性user.dataset.emailzhangsanexample.com;user.dataset.userName李四;// 修改属性// 删除data属性deleteuser.dataset.age;// 通过getAttribute/setAttribute操作console.log(user.getAttribute(data-id));// 1001user.setAttribute(data-address,北京);/script特点data-前缀后的部分会转换为驼峰命名法如data-user-name对应dataset.userNamedataset返回的值都是字符串类型需要时需手动转换类型适用于存储与元素相关的额外数据避免使用自定义属性可能导致的冲突1.4 class 属性的特殊处理class是 HTML 中最常用的属性之一用于指定元素的样式类。由于class是 JavaScript 的关键字DOM 中使用className和classList来操作类属性。1.4.1 classNameclassName属性用于获取或设置元素的完整类名字符串形式。dividboxclasscontainer active/divscriptconstboxdocument.getElementById(box);console.log(box.className);// container active// 替换所有类box.classNamebox hidden;console.log(box.className);// box hidden// 添加类需要手动处理空格box.className new-class;// 注意前面的空格console.log(box.className);// box hidden new-class// 移除类需要处理字符串box.classNamebox.className.replace(hidden,).trim();console.log(box.className);// box new-class中间有两个空格//正则表达式 匹配(空格)new-class(空格)box.classNamebox.className.replace(/\snew-class\s*/, ).trim();console.log(box.className);// box/scriptclassName操作简单但添加、移除特定类时需要处理字符串不够方便。1.4.2 classListclassList是一个只读属性返回元素的类名集合DOMTokenList对象提供了便捷的方法来操作类名。dividboxclasscontainer active/divscriptconstboxdocument.getElementById(box);constclassListbox.classList;// 查看类列表console.log(classList);// DOMTokenList(2) [container, active]console.log(classList.length);// 2console.log(classList.contains(active));// true是否包含某个类/script1.4.2.1 classList.add() 添加类classList.add(new-class);// 添加一个类classList.add(another-class,more-class);// 添加多个类console.log(classList);1.4.2.2 classList.remove() 移除类classList.remove(active);// 移除一个类classList.remove(another-class,more-class);// 移除多个类console.log(classList);1.4.2.3 classList.toggle() 切换类// 切换类存在则移除不存在则添加classList.toggle(hidden);// 添加hidden类console.log(classList);classList.toggle(hidden);// 移除hidden类console.log(classList);有条件的切换无论原来是否存在条件为true时强制添加条件为false时强制移除letisActivetrue;classList.toggle(highlight,isActive);console.log(classList);1.4.2.4 classList.replace() 替换类classList.replace(container,box-container);// 替换类console.log(classList);1.4.2.5 遍历类列表classList.forEach(className{console.log(className);});优点方法简洁直观无需处理字符串和空格支持添加、移除多个类toggle方法非常适合切换元素状态如激活 / 非激活二、DOM 样式操作通过 DOM 可以动态修改元素的样式实现交互效果如悬停、点击反馈、动画等。DOM 提供了多种操作样式的方式。2.1 内联样式style 属性元素的style属性返回一个CSSStyleDeclaration对象用于操作元素的内联样式即style属性中定义的样式。dividboxstylewidth:100px;height:100px;background-color:rgb(240,176,176);/divscriptconstboxdocument.getElementById(box);conststylebox.style;// 读取内联样式console.log(style.width);// 100pxconsole.log(style.backgroundColor);// rgb(240, 176, 176)注意驼峰命名// 修改样式style.width200px;style.backgroundColorrgb233150222;style.border2px solid black;style.fontSize16px;// 添加样式style.margin10px;style.borderRadius10px;// 移除样式设置为空字符串style.border;// 使用CSSText一次性设置多个样式style.cssTextwidth: 150px; height: 150px; border-radius: 5px; background-color:#126607;;// 注意style属性只能访问内联样式不能获取外部样式表或内部样式表中定义的样式console.log(style.margin);// 如果未在style属性中定义/script注意事项CSS 属性名在 JavaScript 中使用驼峰命名法如background-color→backgroundColorfloat属性在 JavaScript 中需使用cssFloat所有样式值都是字符串类型需要时需手动转换如parseInt(style.width)style属性只能操作内联样式无法获取外部样式表中定义的样式2.2 获取计算样式getComputedStylewindow.getComputedStyle()方法用于获取元素的计算样式最终应用在元素上的所有样式包括内联样式、内部样式表和外部样式表。style#box{color:blue;font-size:14px;}/styledividboxstylewidth:100px;Hello World/divscriptconstboxdocument.getElementById(box);// 获取计算样式constcomputedStylewindow.getComputedStyle(box);// 读取计算样式console.log(computedStyle.width);// 100px来自内联样式console.log(computedStyle.color);// rgb(0, 0, 255)来自样式表console.log(computedStyle.fontSize);// 14px来自样式表console.log(computedStyle.marginTop);// 0px默认值// 注意计算样式是只读的无法修改computedStyle.colorred;// 无效// 获取伪元素的计算样式constbeforeStylewindow.getComputedStyle(box,::before);/script特点返回的样式是最终应用在元素上的样式只读颜色值会转换为rgb或rgba格式长度值通常以px为单位即使 CSS 中使用其他单位可以获取伪元素如::before、::after的样式兼容性IE9 及以上支持IE8 及以下使用element.currentStyle兼容写法functiongetStyle(element,pseudoElement){if(window.getComputedStyle){returnwindow.getComputedStyle(element,pseudoElement);}else{// IE8及以下returnelement.currentStyle;}}2.3 通过修改 class 切换样式相比直接操作style属性通过修改元素的class来切换样式是更推荐的做法具有以下优点样式与行为分离便于维护可以一次性应用多个样式便于使用 CSS 过渡和动画style.btn{padding:8px 16px;border:none;border-radius:4px;cursor:pointer;}.btn-primary{background-color:#007bff;color:white;}.btn-primary:hover{background-color:#0056b3;}.btn-danger{background-color:#dc3545;color:white;}.btn-large{padding:12px 24px;font-size:16px;}/stylebuttonidmyBtnclassbtn btn-primary按钮/buttonscriptconstbtndocument.getElementById(myBtn);// 切换按钮样式btn.classList.remove(btn-primary);btn.classList.add(btn-danger);// 添加大尺寸样式btn.classList.add(btn-large);// 点击切换样式btn.addEventListener(click,(){btn.classList.toggle(btn-primary);btn.classList.toggle(btn-danger);});/script最佳实践尽量通过修改class来切换样式而非直接操作style属性复杂的样式变化应定义在 CSS 中通过class切换激活简单的样式调整如动态计算的位置可以使用style属性