web関連

【css,js】css変数の書き方とjavascriptでの操作

2020/03/12

プログラミング

css / 言語-javascript

cssで変数(カスタムプロパティ)が使えるってことなんで備忘録
IEでは使えないっぽい

css変数の使い方

//変数の定義
:root {
  --like-name: red;
}
//css変数の使い方
//プロパティ:var(変数名, 変数未定義の時のフォールバック);
body{
  background:var(--like-name, blue);
}
//ブラウザがcss変数に対応しているか判別(IE以外は対応してる)
@supports(--css: variables) {
  //対応しているブラウザだったらcss反映
  body{
    background:var(--like-name, green);
  }
}

:rootで変数宣言する前にcss変数書いてても大丈夫だった(メモ)

javascriptでcss変数を操作

javascriptでcss変数を前に弄ったようなきがしたのでメモ

<script>
//【css変数の値を取得】
var element = document.querySelector('body');
var style = getComputedStyle(element);
var value = String(style.getPropertyValue('--like-name')).trim();
console.log(value);

//【css変数の追加または上書き】
//<html lang="ja" style="--like-name:black;">
//って感じで追加される
document.documentElement.style.setProperty('--like-name', 'black');
</script>

CSSで変数（カスタムプロパティ）を使ってみよう

.trim()ってなんだ？って思ったら文字列の両端の空白を削除してくれるみたい
String.prototype.trim()で1つの形っぽいね

javascriptで幅なり高さなり取得してcss変数に値を入れることが可能
いまいち使いどころピンとこないけど