JavaScriptDOM操作：怎样获取或修改一个元素的样式？

在JavaScript中，你可以使用DOM（文档对象模型）来获取或修改一个元素的样式。以下是一些常见的方法：

获取元素样式：

1. 通过style属性： 可以使用元素的style属性获取其内联样式。

   // 获取元素的内联样式
   var element = document.getElementById('myElement');
   var backgroundColor = element.style.backgroundColor;
   var fontSize = element.style.fontSize;
   

   注意：这种方法只能获取内联样式，无法获取通过外部样式表或内嵌样式表定义的样式。

2. 通过window.getComputedStyle： 可以使用window.getComputedStyle方法获取计算后的样式。

   var element = document.getElementById('myElement');
   var computedStyle = window.getComputedStyle(element);
   var backgroundColor = computedStyle.backgroundColor;
   var fontSize = computedStyle.fontSize;
   

   这种方法返回的是一个CSSStyleDeclaration对象，包含了计算后的所有样式属性。

修改元素样式：

1. 通过style属性： 可以通过元素的style属性直接修改内联样式。

   // 修改元素的内联样式
   var element = document.getElementById('myElement');
   element.style.backgroundColor = 'red';
   element.style.fontSize = '16px';
   

   这种方法只修改内联样式，不会影响通过外部样式表或内嵌样式表定义的样式。

2. 通过element.className或element.classList： 可以通过修改元素的class属性来应用预定义的样式。

   // 修改元素的 class
   var element = document.getElementById('myElement');
   element.className = 'newClass'; // 覆盖所有类名
   // 或
   element.classList.add('newClass'); // 添加一个新类名
   

   这种方法适用于元素已经有预定义样式类的情况。

3. 通过element.setAttribute： 也可以使用setAttribute方法设置元素的style属性。

   // 使用 setAttribute 修改元素样式
   var element = document.getElementById('myElement');
   element.setAttribute('style', 'background-color: red; font-size: 16px;');
   

   注意：这样设置会覆盖元素原有的所有内联样式。

上述方法中，选择使用哪一种取决于你的需求。通常，使用style属性直接操作内联样式是最常见和简单的方式。如果你需要更灵活的样式操作，可以结合使用window.getComputedStyle和setAttribute等方法。