Bye Bye Moore

PoCソルジャーな零細事業主が作業メモを残すブログ

hyperscriptのstyle attributeについて

hyperscriptには、スタイル属性を付加することができます。
公式によれば、

h('h1.fun', {style: {'font-family': 'Comic Sans MS'}}, 'Happy Birthday!')

h('h1.fun', {style: 'font-family: Comic Sans MS'}, 'Happy Birthday!')

という二パターンの記述法があるようです。*1

ただ、maquetteのチュートリアルにある例題では後者の構文を採用しているようで
前者のパターンを何度やっても最初のフラグすらたたず、1日挟んでhyperscript公式をみてようやく理解しました。

……まぁ、後者の文字列タイプなら例えば

var size = 100
h('h1.fun', {style: 'width:' + 100 + 'px'}}, 'Happy Birthday!')

みたいな感じで、変数をねじ込んだ際ぱっと見わかりやすくはあります。
ネストしないと蕁麻疹でてくるといった難病を抱えてる方以外は、文字列型でやった方が幸せそうです。

*1:公式は、後者の中かっこが一個多いので気をつけてください