Tabulator のチェックONOFFデザインを持ってくる。(2)

昨日書いた
oboe2uran.hatenablog.com

やはり、IE11でも表示できるJS版にします
原始的に、DOMの innerHTML を使います。

HTML

<h2>width × height : 24</h2>
<div class="case1"></div>

<h3>border</h3>
<div class="case2"></div>

<h2>width × height : 14</h2>
<div class="case3"></div>

CSS は前回と同じです。

svg.chk-on path {
   fill: #2dc214;
   clip-rule: evenodd;
   fill-rule: evenodd;
}
svg.chk-off path {
   fill: #ce1515;
}
.case1 svg {
   width: 24px;
   height: 24px;
}
.case2 svg {
   width: 24px;
   height: 24px;
   border: 2px solid #c0c0c0;
   border-radius: 6px;
}
.case3 svg {
   width: 14px;
   height: 14px;
   border: 2px solid #c0c0c0;
   border-radius: 4px;
}

JavaScript jQuery

/* innerHTML にセットする svg - path を定義 */
var svgCheckOn = '<svg class="chk-on" viewBox="0 0 24 24">'
      + '<path d="M21.652----(省略)----652,3.211z">'
      + '</path></svg>';
var svgCheckOff = '<svg class="chk-off" viewBox="0 0 24 24">'
      + '<path d="M22.245----(省略)----245,4.015z">'
      + '</path></svg>';

document.getElementsByClassName('case1')[0].innerHTML = svgCheckOn + svgCheckOff;
document.getElementsByClassName('case2')[0].innerHTML = svgCheckOn + svgCheckOff;
document.getElementsByClassName('case3')[0].innerHTML = svgCheckOn + svgCheckOff;

このように、div に innerHTML するしかなく、svgタグ で innerHTML 実行できないのです。