使用 Java 指令碼更改 CSS 屬性

  2. 貼士文章
  3. JavaScript 貼士
  4. 使用 Java 指令碼更改 CSS 屬性
Nithin Krishnan 2023年10月12日
JavaScript JavaScript CSS
  1. 在 JavaScript 中使用 getElementsByClassName 更改 CSS 屬性
  2. 在 JavaScript 中使用 getElementById 更改 CSS 屬性
  3. 在 JavaScript 中使用 querySelector() 更改 CSS 屬性
  4. まとめ
使用 Java 指令碼更改 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() 方法來唯一選擇一個元素，該方法可以適合所有情況，並根據傳遞給它的引數理解查詢。