當我們想要為網頁增加一些動態的效果時，JavaScript 可能是最好的選擇。其中一個常見的需求是，當使用者在網頁上進行某些操作時，需要動態改變網頁元素的樣式。這時，我們可以使用 JavaScript 來修改 CSS 樣式。
具體來說，我們可以透過 JavaScript 選擇網頁上的元素，然後修改對應的 CSS 屬性。下面，我將介紹如何使用 JavaScript 單機改變 CSS 樣式。
首先，我們需要選取要修改樣式的網頁元素。有許多方法可以選擇元素，這裡我將介紹最常見的兩種方法。
方法一是使用 document.getElementById() 方法，該方法需要傳入一個字串參數，表示元素的 ID。例如：
var element = document.getElementById("myElement");方法二是使用 document.querySelector() 方法，該方法需要傳入一個 CSS 選擇器，表示要選擇的元素。例如：
var element = document.querySelector(".myClass");一旦我們選取了要修改樣式的元素，就可以用 JavaScript 修改其樣式了。以下是一些常見的 CSS 樣式屬性及其修改方法。
2.1. 修改元素的背景顏色
我們可以使用 style.backgroundColor 屬性來修改元素的背景顏色。例如：
element.style.backgroundColor = "red";
2.2. 修改元素的文字顏色
我們可以使用 style.color 屬性來修改元素的文字顏色。例如：
element.style.color = "blue";
2.3. 修改元素的字體大小
我們可以使用 style.fontSize 屬性來修改元素的字體大小。例如：
element.style.fontSize = "20px";
2.4. 修改元素的邊框樣式
我們可以使用 style.border 屬性來修改元素的邊框樣式。它需要傳入一個字串參數，表示邊框的樣式、寬度和顏色。例如：
element.style.border = "1px solid black";
以下是使用 JavaScript 單機改變 CSS 樣式的範例。這個範例包含了一個 HTML 文件和一個 JavaScript 文件，它會在使用者單機一個按鈕時，將文字方塊的背景顏色修改為紅色。你可以將這兩個檔案儲存到同一個資料夾中，然後在瀏覽器中開啟 HTML 檔案來查看效果。
HTML 檔案：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript 修改 CSS 样式</title>
<style>
input {
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<h1>JavaScript 修改 CSS 样式</h1>
<input type="text" id="myInput">
<button id="myButton">单机我</button>
<script src="style.js"></script>
</body>
</html>JavaScript 檔案：
var myButton = document.getElementById("myButton");
var myInput = document.getElementById("myInput");
myButton.onclick = function() {
myInput.style.backgroundColor = "red";
};使用JavaScript 單機改變CSS 樣式可以幫助我們為網頁加入更多的動態效果。我們可以透過選取元素和修改樣式兩個步驟，來實現這個功能。在實務中，我們還可以使用更多的 CSS 屬性和 JavaScript 方法，來實現更複雜的效果。
以上是javascript單機改變css的詳細內容。更多資訊請關注PHP中文網其他相關文章！
