使用 Java 指令碼更改 CSS 屬性
-
在 JavaScript 中使用
getElementsByClassName更改 CSS 屬性 -
在 JavaScript 中使用
getElementById更改 CSS 屬性 -
在 JavaScript 中使用
querySelector()更改 CSS 屬性 - まとめ
超文字標記語言（HTML）是靜態的，通常很笨。這意味著它不具有根據動態條件執行程式碼段的功能。它沒有提供 if 條件塊來顯示隱藏某些 HTML 元素或標籤（如果滿足條件）的規定。對於這種情況，我們可能需要依靠 JavaScript 或 jQuery 來更改 HTML 元素的 CSS 樣式。
要更改 HTML 元素的樣式，例如說 <div>，我們應該唯一地選擇 <div> 或特定的 HTML 元素。現在，我們可以使用文件介面的以下功能來執行此操作。
在 JavaScript 中使用 getElementsByClassName 更改 CSS 屬性
getElementsByClassName 會搜尋整個 HTML 文件，並返回具有該函式引數中傳遞的類名的所有 HTML 元素的陣列。我們還可以在元素上使用它來查詢具有指定 CSS 類名稱的子元素。getElementByClassName 的語法如下。
document.getElementsByClassName('green-class'));
使用 element.style 設定樣式
一旦我們唯一地標識了元素，就可以使用 .style 或 .className 方法來更改其 CSS 樣式。請參考以下示例。
<div class="col-md-12">
<div class="p-3">
<label>Input String:</label><br>
<input type="text" class="input-blue-border" id="b1" value="120">
<button class="ml-3" onclick="changeStyle()">Change Border</button>
</div>
</div>
function changeStyle() {
document.getElementsByClassName('input-blue-border')[0].style.borderColor =
'red';
}
請注意，在 changeStyle() 方法中，我們使用 document.getElementsByClassName("input-blue-border") 方法來查詢輸入元素。它返回帶有選定元素的陣列。我們選擇陣列的第一個元素，並使用 .style.borderColor = "red"更改其邊框顏色。
使用 element.className 設定樣式
可以使用 element.className 來更改 HTML 元素的各種樣式引數，方法是將這些元素合併為一個類，然後使用 element.className 將類名分配給所選元素。此方法很有用，尤其是在需要在輸入欄位中顯示錯誤的情況下。在這種情況下，我們需要將輸入欄位的邊框顏色更改為紅色，並將輸入的內部文字更改為紅色。因此，我們可以將這些樣式作為一個類合併，並使用 element.className 屬性將它們分配給元素。以下程式碼說明了錯誤處理。
<div class="col-md-12">
<div class="p-3">
<label>Input String:</label><br>
<input type="text" class="input-blue-border" id="b1" value="120">
<button class="ml-3" onclick="changeClass()">Change Border</button>
</div>
</div>
function changeClass() {
document.getElementsByClassName('input-blue-border')[0].className =
'input-error';
}
input-error 類具有幾個屬性，這些屬性將輸入欄位的邊框顏色和字型顏色設定為紅色。
備註
getElementByClassName()方法返回一個元素陣列，這些元素限定了作為引數傳遞的類名值。- 通過在此方法返回的陣列上進行迭代，將樣式更改應用於多個元素時，可以使用
getElementByClassName()。 - 選擇元素後，
element.style.<style attribute>就會給選中的元素設定特定的樣式屬性。 - 同樣，
element.className通過將樣式屬性組合為 CSS 類，可以幫助對選定的 HTML 元素設定多個樣式更改。
在 JavaScript 中使用 getElementById 更改 CSS 屬性
如果我們為 HTML 元素分配了唯一的 ID，則可以查詢該元素，並使用 Document 介面的 getElementById() 函式更改其樣式。它是 Web 開發人員使用最廣泛的方法。通常，分配給 div 的 id 將保持唯一，以便在執行 getElementById() 函式時，不會選擇其他 HTML 元素。getElementById() 的語法如下所示。
document.getElementById("parent-1"));
在這種情況下，由於我們選擇唯一的元素，因此樣式更改很容易進行。以下程式碼描述了這些方法。它與前面提到的相似，不同之處在於我們查詢元素的方式。在這裡，我們唯一標識帶有元素 ID 的 HTML 節點。
document.getElementById('b1').style.borderColor = 'red';
document.getElementById('b1').className = 'input-error';
備註
- 與
getElementByClassName()不同，getElementById()方法僅返回一個物件，該物件是查詢選擇的節點元素。 - 為了讓
getElementById()方法發揮作用，目標 HTML 需要有一個 id 屬性。 - 如果多個 HTML 節點具有相同的 id，則
getElementById()方法將返回具有指定 id 的第一個元素。 - 與
getElementByClassName()不同，樣式更改可以直接應用在getElementById()函式返回的物件上，因為它返回的是物件而不是陣列。
在 JavaScript 中使用 querySelector() 更改 CSS 屬性
querySelector() 方法是元素選擇機制提供的功能的超集。它具有 getElementsByClassName() 和 getElementById() 兩種方法的組合功能。使用這種方法，我們可以在編寫 CSS 類時以相同的方式選擇 HTML 元素。它可以用於按 id，按類甚至按 HTML 標籤選擇元素。就返回型別而言，它的行為類似於 getElementById() 方法。querySelector() 僅返回滿足引數中提到的條件的第一個 HTML 節點元素。用於 querySelector() 的語法如下：
document.querySelector('#<id of div>');
document.querySelector('.<css class name>');
document.querySelector('<HTML tag eg: div>');
因此，這裡也可以通過新增 .style.borderColor 或 .className 將樣式應用於選定的 HTML 元素。如果我們使用相同的 HTML 結構，並將 onclick 方法更改為 changeStyle()，則可以通過新增以下 JavaScript 中所述的程式碼來動態地帶來新樣式：
<button class="ml-3" onclick="changeStyle()">Change Border</button>
function changeStyle() {
document.querySelector('.input-blue-border').style.borderColor = 'red';
}
同樣，如果要更改輸入的 CSS 類，而不僅僅是更改樣式，則需要在上面的示例中使用 .className() 屬性而不是 .style.borderColor。
<button class="ml-3" onclick="changeClass()">Change Border</button>
function changeClass() {
document.querySelector('.input-blue-border').className = 'input-error';
}
備註
- 值得注意的是
document.querySelector()函式的返回型別。它不是返回滿足查詢條件的所有 HTML 物件，而是返回適合查詢條件的第一個元素。 - 使用
querySelector()的好處是我們可以在各種情況下使用它，可能是基於 HTML 元素的 ID 或 CSS 類，甚至帶有 HTML 標籤名進行查詢。 querySelector()可能無法動態改變多個滿足查詢條件的 div 的樣式，因為它返回一個物件，而不是傳遞查詢詞的 HTML 元素陣列。
まとめ
為了在執行時更改 HTML 元素的樣式，我們可以使用所選 HTML 元素的 .style 或 .className 屬性。選擇目標 HTML 節點時面臨挑戰。有多種方法可以唯一地選擇 HTML 節點。我們可以使用 getElementsByClassName() 方法，該方法使用 CSS 類的名稱來查詢 HTML 節點。或通過為其分配 ID 並使用 .getElementById() 進行查詢或使用多功能 querySelector() 方法來唯一選擇一個元素，該方法可以適合所有情況，並根據傳遞給它的引數理解查詢。