JavaScript 如何存取和修改 CSS 自訂屬性？-css教學-PHP中文網

首頁

web前端

css教學

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

Linda Hamilton

Dec 09, 2024 am 03:01 AM

How Can JavaScript Access and Modify CSS Custom Properties?

使用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');

登入後複製

範例

考慮以下程式碼：

<body>
  <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>
</body>

登入後複製

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

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

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn