nehan.jsではセレクタの値に「関数値」を設定できるものがあります。
例えばcssの擬似クラスにnth-childというものがありますが、これに2n+1とか-n+10とかいう値を設定するよりは、nを受け取る関数にしたほうがわかりやすいので、nehan.jsではnth-child, nth-type-of-childなどは関数で指定するようになっています。
以下はnth-childを使って、「先頭から10番以内かつ奇数」なら、背景色をピンクにするスタイル宣言です(ちなみにここではnehan.jsの基本的な扱い方については説明しません)。
var engine = Nehan.setup(); engine.setStyle(".my-list li", { "nth-child": function(n, markup, ctx){ if(n < 10 && n % 2 == 1){ return {"background-color":"pink"}; } } });
続けて「cssで書くとどうなるか」を書きたいところですが、擬似クラスで奇数かつ10以内とか一発指定できるんでしょうか。ちょっと書き方がわからないのでごめんなさい。
もちろん全ての擬似クラスが関数を取るわけじゃなく、firstのような「点」で指定できるものは、cssと同様の文法で指定できます。
// 先頭だけ赤くてデカい文字 engine.setStyle(".my-list li:first", { "font-size":"2em", "color":"#ff0000" });
ちなみにnehan.jsでは、より汎用性のあるやり方として「onload」というフックをスタイルにセットできるようになっています。
// 三番目だけ太字に engine.setStyle(".my-list li", { "onload":function(markup, ctx){ var nth = markup.getChildNth(); if(nth === 2){ return {"font-weight":"bold"}; } } });
上のサンプルでは、onloadの引数に入ってくるmarkupクラスを使ってnth-childを取得し、三番目なら太字にするスタイルを返しています(ゼロから数えるので、2が三番目であることに注意)。
ちなみに二番目の引数ctxですが、この中にはドキュメントの情報が色々と入っています。
例えばhtmlのmetaヘッダとか、ドキュメントのアウトライン構造とか、anchorが貼られたリンク集合みたいなものです。
以下はこのctxからhtml headerに含まれるmetaタグの個数を取得し、デバッグ出力するタグを作るサンプルです。
engine.setStyle("meta-debug", { "display":"block", "border-width":"2px", "border-style":"solid", "border-color":"black", onload:function(markup, ctx){ var meta_count = ctx.getHeader().getMetas().length; if(meta_count === 0){ markup.setContentRaw("no meta!"); return {"color":"red", "font-weight":"bold"}; } else { markup.setContentRaw("meta count=" + meta_count); return {"color":"blue"}; } } });
上のサンプルでは、metaタグの数に応じて異なるスタイルを返すと共に、markupの中身も書き換えています。