通过JavaScript访问CSS自定义属性（又称CSS变量）

  • Z时代
  • 2024-01-10
  • 分类：问答

如何var(…)使用JavaScript（纯文本或jQuery）获取和设置CSS自定义属性（在样式表中使用过的属性）？

这是我失败的尝试：单击按钮会更改常规font-weight属性，但不会更改自定义--mycolor属性：

<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <style>
    body { 
      --mycolor: yellow;
      background-color: var(--mycolor);
    }
  </style>
</head>
<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['font-weight'] = 'bold';
    document.body.style['--mycolor'] = 'red';
  };
  function jQuery_() {
    $('body').css('font-weight', 'bold');
    $('body').css('--mycolor', 'red');
  }
  </script>
</body>
</html>

回答：

您可以使用document.body.style.setProperty('--name', value);：

var bodyStyles = window.getComputedStyle(document.body);
var fooBar = bodyStyles.getPropertyValue('--foo-bar'); //get
document.body.style.setProperty('--foo-bar', newValue);//set

以上是 通过JavaScript访问CSS自定义属性（又称CSS变量） 的全部内容， 来源链接： utcz.com/qa/411523.html

回到顶部