#js 修改全局 CSS

CSS 是用于描述網頁內容的樣式表語言，可以用于控制網頁中元素的樣式、大小、位置等。在前端開發中，我們可以使用 CSS 來美化我們的網頁，提高網頁的可讀性和美觀度。但是，有時候我們需要修改全局 CSS 樣式，或者需要對 CSS 樣式進行個性化的調整。

使用 JavaScript 修改全局 CSS 樣式是一種非常常見的前端開發技巧。通過 JavaScript，我們可以在需要修改樣式的地方添加一個條件檢查，然后使用 CSS 樣式表進行修改。下面，我們將介紹如何使用 JavaScript 修改全局 CSS 樣式。

## 1. 使用條件檢查

使用條件檢查來修改全局 CSS 樣式是一種非常簡單的技巧。我們可以在 HTML 中創建一個條件檢查節點，然后使用 JavaScript 來控制這個節點的渲染和顯示。

例如，我們可以在 HTML 中創建一個條件檢查節點，并在 JavaScript 中獲取這個節點的渲染屬性，如 class 或 id 等。然后，我們可以使用這些屬性來修改全局 CSS 樣式。

```html

<div id="my-container">

<div class="my-element">

<p>Hello, World!</p>

</div>

</div>

在 JavaScript 中，我們可以使用 `document.getElementById()` 來獲取條件檢查節點，如下面這樣：

```javascript

const container = document.getElementById('my-container');

const element = document.getElementById('my-element');

container.classList.add('my-active');

在上面的代碼中，我們首先使用 `document.getElementById()` 來獲取條件檢查節點，然后獲取到渲染屬性 `class` 或 `id` 屬性，如 `class="my-active"`。最后，我們使用 `classList.add()` 方法將這個屬性設置為 `my-active`，這樣整個元素就會在全局 CSS 中加上一個新的類，如 `.my-active`。

## 2. 使用 CSS 修改器

除了使用條件檢查來修改全局 CSS 樣式，我們還可以使用 CSS 修改器來修改全局 CSS 樣式。CSS 修改器是一種 JavaScript 庫，它提供了一些方便的方法來修改 CSS 樣式。

例如，我們可以使用 CSS 修改器來修改元素的樣式，如下面這樣：

```javascript

const container = document.getElementById('my-container');

const element = document.getElementById('my-element');

const style = document.createElement('style');

style.type = 'text/css';

style.innerHTML = `

.my-active {

color: red;

container.appendChild(style);

element.classList.add('my-active');

在上面的代碼中，我們首先使用 `document.createElement()` 方法創建一個 CSS 修改器對象，然后使用 `style.innerHTML` 屬性將新的 CSS 樣式添加到修改器中。最后，我們將修改器添加到條件檢查節點中，這樣整個元素就會在全局 CSS 中加上一個新的類，如 `.my-active`。

使用 CSS 修改器來修改全局 CSS 樣式也是非常方便的，只需要在需要修改的地方添加一個修改器對象，然后修改樣式即可。

## 3. 總結

使用 JavaScript 修改全局 CSS 樣式是一種非常常見的前端開發技巧。通過 JavaScript，我們可以在需要修改樣式的地方添加一個條件檢查，然后使用 CSS 樣式表進行修改。使用 CSS 修改器也可以非常方便地修改全局 CSS 樣式。