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中文网其他相关文章！