使用 Java 指令碼更改 CSS 屬性

  1. 在 JavaScript 中使用 getElementsByClassName 更改 CSS 屬性
  2. 在 JavaScript 中使用 getElementById 更改 CSS 屬性
  3. 在 JavaScript 中使用 querySelector() 更改 CSS 屬性
  4. 結論

超文字標記語言(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() 方法來唯一選擇一個元素,該方法可以適合所有情況,並根據傳遞給它的引數理解查詢。