使用内联和其他样式反应原生 - JavaScript

在 JavaScript 中，我们可以使用内联样式和其他样式来动态反应原生的变化，从而使页面更加动态。

内联样式

内联样式是指将 CSS 样式直接应用于特定元素的 style 属性中。它可以直接在元素上设置，也可以使用 JavaScript 动态设置。

直接在元素上设置

我们可以在 HTML 元素的 style 属性中设置内联样式。比如设置一个 div 的背景颜色为红色：

<div style="background-color: red;">我的背景是红色的</div>

使用 JavaScript 动态设置

我们也可以使用 JavaScript 动态设置元素的内联样式。比如获取一个 div 元素，将其背景颜色设置为蓝色：

const div = document.querySelector('div');
div.style.backgroundColor = 'blue';

其他样式

除了内联样式，我们还可以使用其他样式（如 class 和 id）来反应原生的变化。

class

class 可以被多个元素共用，它可以定义多个 CSS 样式。在 JavaScript 中，我们可以通过更改元素的 class 属性来应用不同的样式，从而反应其变化。

首先，我们需要在 CSS 样式表中定义 class：

.blue {
  background-color: blue;
}

.red {
  background-color: red;
}

然后，在 HTML 中使用这些 class：

<div class="blue">我的背景是蓝色的</div>
<div class="red">我的背景是红色的</div>

最后，在 JavaScript 中更改元素的 class 属性：

const div = document.querySelector('div');
div.classList.remove('blue');
div.classList.add('red');

id

id 是唯一的，它可以定义一个 CSS 样式。在 JavaScript 中，我们可以通过更改元素的 id 属性来应用样式，从而反应其变化。

首先，我们需要在 CSS 样式表中定义 id：

#blue {
  background-color: blue;
}

#red {
  background-color: red;
}

然后，在 HTML 中使用这些 id：

<div id="blue">我的背景是蓝色的</div>
<div id="red">我的背景是红色的</div>

最后，在 JavaScript 中更改元素的 id 属性：

const div = document.querySelector('div');
div.id = 'red';

以上就是使用内联样式和其他样式反应原生的方法。这些方法可以使页面更加动态、丰富。