JavaScript與CSS(1)

2024 iThome 鐵人賽

DAY 24

JavaScript

入門JavaScript系列第 24 篇

16th鐵人賽

mlin_1229

2024-10-07 23:41:16

20 瀏覽

分享至

JavaScript 和 CSS 的結合使得網頁能夠更具動態性和互動性，能即時改變頁面上的元素樣式、佈局以及動畫效果。JavaScript 可以在執行階段修改 CSS 樣式、操控類別（class）、改變樣式表（stylesheet），這使得開發者能夠根據使用者行為動態調整頁面外觀。

1. JavaScript 與 CSS 的基礎互動

JavaScript 通過操縱 DOM 元素來改變其樣式。這些樣式可以是內嵌於 HTML 標籤的 style 屬性，或者是通過操作類別來應用的外部樣式表。

修改內聯樣式

JavaScript 可以直接通過 DOM 元素的 style 屬性來設置內聯樣式，這將覆蓋外部或內部樣式表中的樣式。

<div id="myDiv">This is a div</div>

<script>
  const myDiv = document.getElementById('myDiv');
  myDiv.style.color = 'blue';  // 改變文字顏色
  myDiv.style.backgroundColor = 'yellow';  // 改變背景顏色
</script>

在這個例子中，JavaScript 改變了 myDiv 的內聯樣式，將文字顏色變為藍色，背景變為黃色。

操控類別（class）

比起直接操作內聯樣式，更好的方式是通過操控元素的 class 來改變樣式。這樣可以保持樣式與行為的分離，讓樣式定義保持在 CSS 文件中，從而保持代碼清晰可讀。

<style>
  .redText {
    color: red;
  }
</style>

<div id="myText">Hello World!</div>
<button id="toggleButton">Toggle Red Text</button>

<script>
  const myText = document.getElementById('myText');
  const toggleButton = document.getElementById('toggleButton');

  toggleButton.addEventListener('click', function() {
    myText.classList.toggle('redText');  // 切換 redText 類別
  });
</script>

這個範例使用了 classList.toggle() 方法來動態地添加或移除 redText 類別，從而實現按鈕點擊時文字顏色的變化。

2. 操作 CSS 樣式表（Stylesheets）

除了操縱內聯樣式或類別，JavaScript 也可以動態操作 CSS 樣式表。這可以讓開發者有能力在運行時創建、刪除或修改樣式表的規則，從而達到更複雜的動態效果。

動態添加 CSS 規則

<script>
  const styleSheet = document.createElement('style');
  document.head.appendChild(styleSheet);  // 創建並添加一個 <style> 標籤

  styleSheet.sheet.insertRule('body { background-color: lightblue; }', 0);  // 在樣式表中插入一條規則
</script>

這段代碼動態創建了一個新的 <style> 元素並插入到頁面的 <head> 中，然後使用 insertRule() 方法向樣式表中添加了一條新的 CSS 規則，將頁面的背景顏色設置為淺藍色。

動態修改現有樣式

JavaScript 也可以讀取並修改現有樣式表中的規則。

<style id="dynamicStyles">
  .box {
    width: 100px;
    height: 100px;
    background-color: red;
  }
</style>

<div class="box"></div>
<button id="changeColor">Change Color</button>

<script>
  const styleSheet = document.getElementById('dynamicStyles').sheet;
  const changeColorButton = document.getElementById('changeColor');

  changeColorButton.addEventListener('click', function() {
    styleSheet.cssRules[0].style.backgroundColor = 'green';  // 修改第一條規則的背景顏色
  });
</script>

在這個範例中，我們使用 sheet 來獲取樣式表，然後通過訪問 CSS 規則中的 cssRules 來修改 box 的背景顏色。

3. JavaScript 與 CSS 轉換（Transform）與過渡（Transition）

JavaScript 可以控制 CSS 的 transform 和 transition 屬性來實現動畫效果。例如，透過 style.transform 可以實現旋轉、縮放等效果，透過 transition 可以控制這些變化的速度和過程。

例子：使用 `transform` 和 `transition`

<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: red;
    transition: transform 0.5s ease;
  }

  .rotated {
    transform: rotate(45deg);
  }
</style>

<div class="box" id="box"></div>
<button id="rotateButton">Rotate</button>

<script>
  const box = document.getElementById('box');
  const rotateButton = document.getElementById('rotateButton');

  rotateButton.addEventListener('click', function() {
    box.classList.toggle('rotated');  // 切換旋轉類別
  });
</script>

這裡透過 transform 和 transition，我們可以讓紅色的方塊在點擊按鈕時旋轉 45 度。transition 屬性則控制了旋轉動畫的持續時間和效果，使得變化更加平滑。

4. JavaScript 與 CSS 動畫（Animation）

JavaScript 可以控制和觸發 CSS 定義的動畫（@keyframes）。動畫可以通過 CSS 定義，而 JavaScript 用於控制動畫的開始、暫停和其他交互行為。

例子：觸發 CSS 動畫

<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: red;
    animation: move 2s linear infinite paused;
  }

  @keyframes move {
    0% { transform: translateX(0); }
    100% { transform: translateX(300px); }
  }
</style>

<div class="box" id="box"></div>
<button id="startButton">Start Animation</button>
<button id="stopButton">Stop Animation</button>

<script>
  const box = document.getElementById('box');
  const startButton = document.getElementById('startButton');
  const stopButton = document.getElementById('stopButton');

  startButton.addEventListener('click', function() {
    box.style.animationPlayState = 'running';  // 開始動畫
  });

  stopButton.addEventListener('click', function() {
    box.style.animationPlayState = 'paused';  // 暫停動畫
  });
</script>

在這個範例中，CSS 使用 @keyframes 定義了一個移動動畫，而 JavaScript 透過操作 animationPlayState 屬性來控制動畫的開始和暫停。

5. CSS 變數與 JavaScript

現代的 CSS 支持變數（CSS Variables），這些變數可以通過 JavaScript 來動態修改。這使得開發者可以輕鬆地控制整個網頁的主題或樣式風格。

例子：使用 JavaScript 修改 CSS 變數

<style>
  :root {
    --main-bg-color: lightblue;
  }

  body {
    background-color: var(--main-bg-color);
  }
</style>

<button id="changeColor">Change Background Color</button>

<script>
  const root = document.documentElement;
  const changeColorButton = document.getElementById('changeColor');

  changeColorButton.addEventListener('click', function() {
    root.style.setProperty('--main-bg-color', 'lightgreen');  // 修改 CSS 變數
  });
</script>

這個範例使用了 CSS 變數 --main-bg-color 來控制頁面的背景顏色，並通過 JavaScript 動態修改該變數，實現了點擊按鈕時背景顏色的變化。