通过 JavaScript 访问 CSS 自定义属性(又名 CSS 变量)

Posted

技术标签:

【中文标题】通过 JavaScript 访问 CSS 自定义属性(又名 CSS 变量)【英文标题】:Accessing a CSS custom property (aka CSS variable) through JavaScript 【发布时间】:2016-07-05 11:02:28 【问题描述】:

如何使用 javascript(普通或 jQuery)获取和设置 CSS 自定义属性(在样式表中使用 var(…) 访问的属性)?

这是我失败的尝试:单击按钮会更改通常的 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>

【问题讨论】:

CSS 是否支持var @Gothdo 是的。 developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables 然而,它仍然是实验性的。此外,它的目的不是针对您在运行时更改的内容,而是针对可维护性。如果你想要的东西你可以改变看看attr TL;DR : getComputedStyle(document.documentElement).getPropertyValue('--x') 【参考方案1】:

原生解决方案

获取/设置 CSS3 变量的标准方法.setProperty().getPropertyValue()

如果您的变量是全局变量(在 :root 中声明),您可以使用以下内容来获取和设置它们的值。

// setter
document.documentElement.style.setProperty('--myVariable', 'blue');
// getter
document.documentElement.style.getPropertyValue('--myVariable');

不过,getter 只会返回一个 var 的值,如果已设置,则使用 .setProperty()。 如果已通过 CSS 声明设置,将返回 undefined。在这个例子中检查它:

let c = document.documentElement.style.getPropertyValue('--myVariable');
alert('The value of --myVariable is : ' + (c?c:'undefined'));
:root --myVariable : red; 
div background-color: var(--myVariable); 
  &lt;div&gt;Red background set by --myVariable&lt;/div&gt;

为避免这种意外行为,您必须在调用.getPropertyValue() 之前使用getComputedStyle()方法。 然后,getter 将如下所示:

getComputedStyle(document.documentElement,null).getPropertyValue('--myVariable');

在我看来,访问 CSS 变量应该更简单、快速、直观和自然……


我的个人方法

我已经实现了CSSGlobalVariables一个很小的 ​​(以便于访问和操作。

// get the document CSS global vars
let cssVar = new CSSGlobalVariables();
// set a new value to --myVariable
cssVar.myVariable = 'red';
// get the value of --myVariable
console.log( cssVar.myVariable );

应用于对象属性的任何更改都会自动转换为 CSS 变量。

适用于:https://github.com/colxi/css-global-variables

【讨论】:

当您需要在 JS 中操作变量时,我喜欢它,但在我的情况下,我只需要获取值。因此,我只需要一个返回 getComputedStyle(document.documentElement,null).getPropertyValue(varStr); 的辅助函数,而不是完整的辅助库 我知道这是一个较老的问题,但是您将如何将样式表中的实际 var(--varName) 动态更改为所选值?如果我想将样式表提供给用户,我希望用户看到实际的颜色名称或十六进制值,而不是 var(--varName)。以***.com/q/59507329/10964617 为例 @Dave.Q 在那种情况下你可以使用 Sass 或 Less,否则我看不出如何直接公开这些值 @connexo 完全正确。它按预期输出undefined。再次阅读代码 sn-p 之前的注释。【参考方案2】:

以下示例说明了如何使用 JavaScript 或 jQuery 更改背景,利用自定义 CSS 属性也称为 CSS 变量(阅读更多 here)。奖励:代码还指出了如何使用 CSS 变量来更改字体颜色。

function plain_js()  
    // need DOM to set --mycolor to a different color 
    d.body.style.setProperty('--mycolor', 'red');
     
    // get the CSS variable ...
    bodyStyles = window.getComputedStyle(document.body);
    fontcolor = bodyStyles.getPropertyValue('--font-color'); //get
 
    // ... reset body element to custom property's new value
    d.body.style.color = fontcolor;
    d.g("para").style["font-weight"] = "bold";
    this.style.display="none";
  ;

  function jQuery_() 
    $("body").get(0).style.setProperty('--mycolor','#f3f');
    $("body").css("color",fontcolor);
    $("#para").css("fontWeight","bold");
    $(this).css("display","none");
  
  
var bodyStyles = null;
var fontcolor = "";
var d = document;

d.g = d.getElementById;
d.g("red").addEventListener("click",plain_js);
d.g("pink").addEventListener("click",jQuery_);
:root 
     --font-color:white;
     --mycolor:yellow;
    
    body  
      background-color: var(--mycolor);
      color:#090;
    
    
    #para 
     font: 90% Arial,Helvetica;
     font-weight:normal;
    
    
    #red 
      background:red;
    
    
    #pink 
      background:#f3f;
    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<p id="para">Let's try to make the background red or pink and change the text to white and bold.</p>
  <button id="red">Red</button>
  <button id="pink">Pink</button>

请注意,对于 jQuery,为了将自定义属性设置为不同的值,response 实际上保存了答案。它使用 body 元素的 get() 方法,该方法允许访问底层 DOM 结构并返回 body 元素,从而便于代码将自定义属性 --mycolor 设置为新值。

【讨论】:

【参考方案3】:

你可以使用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

更多信息here。

【讨论】:

该集合是否也将 CSS 中对该变量的所有引用更新为? 可以作为全局变量使用,无需加载新文件CSS即可更改 对于任何想要在&lt;html&gt;-tag 而非正文上获取或设置属性的人:您可以使用document.documentElement 访问它。 shadow root 中的样式怎么样?

以上是关于通过 JavaScript 访问 CSS 自定义属性(又名 CSS 变量)的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript自定义浏览器滚动条兼容IE 火狐和chrome

为组件定义css模块时如何访问antd less变量?

如何使用 javascript 创建自定义关键帧 css 动画

javascript 将自定义CSS添加到iFrame(未经测试)

javascript 将自定义CSS添加到iFrame(未经测试)

javascript 将自定义CSS添加到iFrame(未经测试)