web-dev-qa-db-ja.com

JavaScriptを介してCSSカスタムプロパティ（別名CSS変数）にアクセスする

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>
javascriptjquerycsscss-variables
31
MarcZ

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

詳細情報 こちら 。

42
CMedina

ネイティブソリューション

CSS3変数を取得/設定するための標準メソッドは、.setProperty()および.getPropertyValue()です。

変数がグローバル（_:root_で宣言されている）である場合、以下を使用して値を取得および設定できます。

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

ただし、ゲッターは.setProperty()を使用して、varの値が設定されている場合にのみ返します。 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); }_
_  <div>Red background set by --myVariable</div>_

この予期しない動作を回避するには、getComputedStyle()を呼び出す前に.getPropertyValue() methodを使用する必要があります。ゲッターは、次のようになります。

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

私の意見では、CSS変数へのアクセスはよりシンプルで、速く、直感的で自然でなければなりません...

私の個人的なアプローチ

CSSGlobalVariablesa小さな（<3kb）javascriptヘルパーwitchを実装しました。これは、ドキュメント内のすべてのアクティブなCSSグローバル変数を自動的に検出してオブジェクトにパックします。 。

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

11
colxi

次の例は、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を新しい値に。

1
slevy1