JavaScript 如何存取和修改 CSS 自訂屬性？

使用JavaScript 存取CSS 自訂屬性

JavaScript 提供了存取和操作CSS 自訂屬性（也稱為CSS 變數）的方法。與常規 CSS 屬性不同，這些自訂屬性可透過樣式表中的 var(...) 語法存取。

取得自訂屬性值

擷取以下值自訂屬性，請使用window.getCompulatedStyle(document.body).getPropertyValue('--name')，其中--name 是自訂屬性名稱。例如：

var bodyStyles = window.getComputedStyle(document.body);
var fooBar = bodyStyles.getPropertyValue('--foo-bar');

設定自訂屬性值

要設定自訂屬性值，請使用document.body.style.setProperty('--name' , value)，其中--name 是自訂屬性名稱，value 是新值。例如：

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

範例

考慮以下程式碼：

  <p>Let's try to make this text bold and the background red.</p>
  <button onclick="plain_js()">Plain JS</button>
  <button onclick="jQuery_()">jQuery</button>

  <script>
    function plain_js() { 
      document.body.style.setProperty('--mycolor', 'red');
      document.body.style['font-weight'] = 'bold';
    };
    function jQuery_() {
      $('body').css('--mycolor', 'red');
      $('body').css('font-weight', 'bold');
    }
  </script>

按一下「Plain JS」或「jQuery」按鈕現在會--mycolor 自訂屬性設為紅色並將文字加粗。

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