js怎麼改變css屬性

JavaScript (JS) 是一種用於設計互動式網頁和動態網站的程式語言。 JS可以透過 DOM (文檔物件模型) 來存取和操作 HTML 頁面中的元素。本文主要介紹如何使用 JS 來改變 CSS 屬性。

一、取得元素
在改變 CSS 屬性之前，需要先取得到要操作的元素。可以使用 document.getElementById() 方法透過元素 ID 來取得元素，或使用 document.querySelector() 方法透過 CSS 選擇器來取得元素。

如下面的範例：
HTML 程式碼：

<div id="myDiv">Hello World!</div>

JS 程式碼：

var myDiv = document.getElementById("myDiv");

或

var myDiv = document.querySelector("#myDiv");

這兩行程式碼都會取得包含文本“Hello World!” 的div 元素。

二、改變 CSS 屬性
有兩種方式可以改變 CSS 屬性: 透過 style 屬性直接變更樣式，或透過 class 屬性來改變樣式。

1. 直接變更樣式
   可以使用元素的style 屬性來改變CSS 樣式，如下範例變更背景顏色為紅色：

   myDiv.style.backgroundColor = "red";

   也可以同時變更多個樣式：

   myDiv.style.backgroundColor = "red";
   myDiv.style.color = "white";

2. 透過class 屬性
   透過改變class 屬性可以在CSS 檔案中預先定義好多個樣式，然後在JS 中透過元素的class 屬性來改變樣式。如下例子，改變背景顏色為藍色：
   CSS 程式碼：

   .blue-background {
     background-color: blue;
   }

   JS 程式碼：

   myDiv.className = "blue-background";

   這樣就可以將 div 元素背景顏色改為藍色。

三、事件觸發樣式變更
JS 還可以在使用者執行某些操作後觸發樣式變更。如下例子，當滑鼠懸浮在元素上時，改變文字顏色為綠色：
HTML 程式碼：

<div id="myDiv">Hello World!</div>

JS 程式碼：

var myDiv = document.getElementById("myDiv");

myDiv.onmouseover = function() {
  myDiv.style.color = "green";
};

myDiv.onmouseout = function() {
  myDiv.style.color = "black";
};

當滑鼠懸浮在元素上時，文字顏色會變成綠色；當滑鼠移開時，文字顏色會恢復為黑色。

總結：
透過使用 JS 可以輕鬆的修改 HTML 元素的樣式，讓網站更加動態和有趣。使用上述方法可以在網站設計中靈活地運用 JS 改變樣式，使頁面更加多元。

以上是js怎麼改變css屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章！