2

今週、私は CSS3 変数の素晴らしさを発見しました! 彼らを愛する！

:root {
    --main-height: 45px;
    --main-gutter: -8px;

    --match-width: 180px;
    --player-width: 370px;
    --score-width: 60px;
}

私の質問...これらの変数を JavaScript で取得/設定する方法はありますか?

4

2 に答える 2

3

ここに動作するデモがCODEPENあり、下にスニペットがあります。詳細はソースにコメントされています。

主な部分は次のとおりです。

setPropertyとテンプレート リテラル

// Collect the inputs
const adjGrp = [].slice.call(document.querySelectorAll('#adjustments input'));

// Add an eventListener to each input for the change event
adjGrp.forEach(input => input.addEventListener('change', adjCSS));

// Event handler uses setProperty method and template literal of the CSS variable 
// Input name attributes are referenced to the corresponding CSS variable
function adjCSS(e) {
  document.documentElement.style.setProperty(`--${this.name}`, this.value + 'px');
}
:root {
  --mainh: 45px;
  --mainw: 480px;
  --match: 180px;
  --player: 370px;
  --score: 60px;
}
#main {
  font: 500 16px/1.5 Consolas;
  height: var(--mainh);
  width: var(--mainw);
}
#scoreboard {
  display: table;
  width: calc(var(--player) + 150px);
  height: calc((var(--main) * .2));
  margin: 15px 0 15px 20px;
}
legend {
  font-size: 1.6rem;
  font-variant: small-caps;
}
output {
  display: table-cell;
  line-height: 1.5;
  border: 3px inset grey;
  padding: 3px 5px;
}
#match {
  width: var(--match);
}
#player {
  width: var(--player);
}
#score {
  width: var(--score);
}
#adjustments {
  margin: 0 0 0 20px;
}
<form id='main'>
  <fieldset id='scoreboard'>
    <legend>Scoreboard</legend>
    <input id='m' type='hidden'>
    <input id='p' type='hidden'>
    <input id='s' type='hidden'>

    <label>Player
      <output id='player' for='p'>Name</output>
      <br/>
    </label>
    <label>Match&nbsp;
      <output id='match' for='m'>0</output>
      <br/>
    </label>
    <label>Score&nbsp;
      <output id='score' for='s'>0</output>
    </label>
  </fieldset>


  <fieldset id='adjustments'>
    <legend>Adjustments</legend>
    <label>Player
      <input name='player' type='number'>
    </label>
    <br/>
    <label>Match&nbsp;
      <input name='match' type='number'>
    </label>
    <br/>
    <label>Score&nbsp;
      <input name='score' type='number'>
    </label>
    <br/>
  </fieldset>
</form>

于 2016-08-22T02:15:12.020 に答える
0

おそらく、スタイル要素を作成し、<head>必要な CSS を含む に追加できます。

$("head").append(`
   <style type="text/css">
    CSS CODE
   </style>
`);

ただし、ブラウザー間の互換性を気にする場合は、まだ CSS 変数を使用するべきではありません。

于 2016-08-22T00:20:44.743 に答える