面试题：JavaScript 中如何获取并修改 DOM 元素的内联样式？

Question

在 JavaScript 中，给定一个 DOM 元素（假设通过 `document.getElementById('target')` 获取到），请写出代码获取该元素的内联样式中 `color` 属性的值，并将其修改为 `'red'`，同时解释 `style` 对象和 `getAttribute` 方法在操作样式上的区别。

Answer 1

获取并修改内联样式中 color 属性值的代码

const targetElement = document.getElementById('target');
// 获取内联样式中 color 属性的值
const currentColor = targetElement.style.color; 
// 修改内联样式中 color 属性的值为'red'
targetElement.style.color ='red'; 

style 对象和 getAttribute 方法在操作样式上的区别

1. style 对象：
   • 作用：主要用于操作元素的内联样式。它直接反映了 HTML 元素标签内 style 属性所定义的样式。
   • 特点：
     • 只能获取和修改内联样式，无法获取通过外部样式表或 <style> 标签定义的样式。
     • 以 JavaScript 对象属性的形式访问和修改样式属性，属性名采用驼峰命名法，例如 backgroundColor 对应 CSS 中的 background - color。
     • 修改 style 对象属性会立即反映在页面上，直接改变元素的呈现样式。
2. getAttribute 方法：
   • 作用：用于获取元素的任意属性值，包括 style 属性。但通过它获取的 style 属性值是一个字符串，包含了整个内联样式声明。
   • 特点：
     • 不仅能获取内联样式，还能获取元素的其他各种属性，如 id、class 等。
     • 获取的样式值是原始的 CSS 文本形式，需要进一步解析才能得到具体样式属性的值。例如，如果 style="color: blue; font - size: 16px;"，使用 getAttribute('style') 得到的是整个字符串，若要获取 color 值，还需字符串解析操作。
     • 一般不用于修改样式，因为修改时需要重新设置整个 style 属性字符串，比较繁琐且容易覆盖原有样式。若想修改样式，使用 style 对象更为方便。