如何使用JavaScript有效存取和修改CSS自訂屬性？

在JavaScript 中與CSS 自訂屬性互動

在現代Web 開發中，CSS 自訂屬性（也稱為CSS 變數）發揮著至關重要的作用增強樣式自訂和程式碼可維護性。這些屬性可以在樣式表中定義並使用 var(...) 語法進行存取。然而，透過 JavaScript 存取和操作它們提出了獨特的挑戰。

自訂屬性存取和操作

要使用 JavaScript 存取 CSS 自訂屬性，您可以利用文件.body.style.setProperty() 方法。此方法接受兩個參數：

• --name：自訂屬性的名稱，以兩個破折號 (--) 為前綴。
• value：要指派給的值屬性。

例如，更改在提供的HTML 中定義的「--mycolor」自訂屬性代碼：

document.body.style.setProperty('--mycolor', 'red');

用於屬性操作的jQuery

或者，您可以使用jQuery 的css()方法來實現相同的效果結果：

$('body').css('--mycolor', 'red');

範例

在您提供的HTML 程式碼中，您嘗試使用不正確的語法修改「--mycolor ”屬性。為了達到預期的效果，需要進行以下修改：

function plain_js() { 
  document.body.style['font-weight'] = 'bold';
  document.body.style.setProperty('--mycolor', 'red');
}

function jQuery_() {
  $('body').css('font-weight', 'bold');
  $('body').css('--mycolor', 'red');
}

透過使用適當的語法，您現在可以成功設定'font-weight' 屬性和'--mycolor' 自訂屬性，動態改變目標元素的文字和背景顏色。

以上是如何使用JavaScript有效存取和修改CSS自訂屬性？的詳細內容。更多資訊請關注PHP中文網其他相關文章！