javascript演習 2日目、３日目/３０日

覚えたことたち

1秒ごとに１度回転させる

const now = new Date();

const seconds = now.getSeconds();
const secondsDegree = ((seconds / 60) * 360);
secondHand.style.transform = `rotate(${secondsDegree}deg)`;

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

ドキュメントのルート要素にcssの変数を設定する

:root {
  --base: #ffc600;
  --spacing: 10px;
  --blur: 10px;
}

img {
   padding: var(--spacing);
   background: var(--base);
   filter: blur(var(--blur));
}

javascriptでhtmlタグのアトリビュートを操作する

//<audio data-key="80">とかのタグをdata-keyで絞り込む
const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);

//<input data-sizing="px">とかのタグのdata-sizingを取得する
const suffix = this.dataset.sizing || '';

ドキュメントのルート要素にcssスタイルをjavascritでつける
これでルートにつけたcssの変数をリアクティブに変更できる。

document.documentElement.style.setProperty(`--${this.name}` , this.value + suffix);