web関連

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

2020/03/12

/

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変数に値を入れることが可能
いまいち使いどころピンとこないけど

 

おまけ:そういえば以前css変数使ってた

そういや以前、スマホの下に出てくるバーを抜いた高さを取得する方法でcss変数を使った時は:rootって使わなかったけど

参考 [CSS]知っておくと便利!スマホで要素を高さいっぱいに表示したいのに、期待通りに表示されない時の解決方法 ...
:root = htmlっぽい

:root – CSS: カスケーディングスタイルシート | MDN

 

IEでは使えないのがネックだけど、スマホサイトでは使えるし使っていこうかなー
本当にIE早くなくならねーかなぁ…