样式处理

在 DOM（文档对象模型）中，样式是指用来控制 HTML 元素外观的属性，如颜色、字体、大小、边框等等。通过 JavaScript 可以动态地修改元素的样式，以实现更加灵活的页面设计。

DOM 中修改元素样式的方法通常有以下几种：

1. 使用元素的 style 属性：每个 DOM 元素都有一个 style 属性，该属性是一个对象，包含了该元素的所有样式属性和值。可以通过修改该对象的属性值来改变元素的样式。例如：

   const element = document.querySelector('#my-element');
   element.style.color = 'red';
   element.style.fontSize = '24px';
   
   /*
   上面的代码将选中页面中 id 为 "my-element" 的元素，并将其文本颜色设置为红色，字体大小设置为 24 像素。
   */
   

2. 使用 CSS 类：可以通过修改元素的 CSS 类来改变其样式。可以在 CSS 文件中定义一组样式类，然后在 JavaScript 中使用 classList 属性来添加或移除这些类。例如：

   .big-text {
     font-size: 24px;
     line-height: 1.5;
   }
   
   const element = document.querySelector('#my-element');
   element.classList.add('big-text');
   
   /* 
   上面的代码将选中页面中 id 为 "my-element" 的元素，并添加名为 "big-text" 的 CSS 类，从而改变该元素的字体大小和行高。
   */
   
   

3. 使用元素的属性：DOM 元素的属性也可以用来控制元素的样式。例如，可以通过修改元素的 className 属性来改变其 CSS 类。但这种方法通常不够灵活，不推荐使用。

需要注意的是，修改元素的样式可能会影响其在页面中的布局和位置。如果要改变元素的大小、位置或布局，应该使用 CSS 的布局属性（如 position、margin、padding 等）来控制，而不是直接修改元素的样式属性。