[JS] Day3 - CSS Variables

3982 ワード
テキストリンク

Day3 - CSS Variables


🎯 機能要件

  • 入力ラベルについては、ユーザの入力値に応じて画像を異なる処理を行う.

    • 🚀 学識


    :root仮想選択プログラムと動的変更

    :root {
    --grayscale: 50%;
    --blur: 10px;
    --color: #ffc600; 
}
    :root仮想選択プログラムでは、ドキュメントツリーのルート要素(HTML)を選択できます.したがって、上記の方法をグローバルCSS変数として使用できます.
    function setValue(e){
    const sizing = e.target.dataset.sizing || '';
    const {name, value} = e.target;

    document.documentElement.style.setProperty(`--${name}`, `${value}${sizing}`);
  // document.documentElement는 <html> 요소를 반환
}
    Day 2ではカスタムCSSも学習できますが、Day 3はこれらの値を直接動的に変更する必要があります.
    stackoverflowからヒントが得られ、style.setProperty(propertyName, value, priority)方式で変更された値を適用することができる.
    実際、:ルート内の値を変更するのではなく、スタイルをトップレベルのラベルにインラインし、優先度に応じて変更します.

    demo:


    https://danji-ya.github.io/JS_javascript30/03-CSSVariables/

    Reference

  • https://developer.mozilla.org/en/docs/Web/API/Document/documentElement
    • [伯俊]#1013 Contact
    POJ3181 Dollar Dayz