Question

如何使用JavaScript（plain或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>

Answer 1

您可以使用app.controller('tableCtrl', function($scope, tableService, uiGridConstants, $stateParams){ console.log($stateParams); //getting empty object console.log($stateParams.id); //getting undefined, this is because the object is empty }：

document.body.style.setProperty('--name', value);

更多信息here。

Answer 2

原生解决方案

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

如果您的变量是Globals（在:root中声明），您可以使用以下内容来获取和设置它们的值。

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

但是，getter只会使用.setProperty() 返回var的值（如果已设置）。如果已通过CSS声明设置，则返回undefined。在这个例子中检查它：

＆＃13;

let c = document.documentElement.style.getPropertyValue('--myVariable');
alert('The value of --myVariable is : ' + (c?c:'undefined'));

＆＃13;

:root{ --myVariable : red; }
div{ background-color: var(--myVariable); }

＆＃13;

  <div>Red background set by --myVariable</div>

＆＃13;

为避免出现意外行为，您必须先使用getComputedStyle()方法，然后才能调用.getPropertyValue()。然后吸气者会看起来像这样：

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

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

我的个人方法

我已经实现CSSGlobalVariables一个微小的（＆lt; 3kb）javascript帮助器，它会自动检测并打包到一个Object中，文档中所有活动的CSS全局变量，以便于访问＆amp;操作

// 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 );

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

可在：https://github.com/colxi/css-global-variables
中使用

Answer 3

以下示例说明了如何使用JavaScript或jQuery更改背景，利用自定义CSS属性（也称为CSS变量）（阅读更多here）。额外：代码还指示如何使用CSS变量来更改字体颜色。

＆＃13;

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_);

＆＃13;

: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;
    }

＆＃13;

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

＆＃13;

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

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

3 个答案:

原生解决方案

我的个人方法