パーツ番号 03-04-08 ・ JavaScript使用

単位系切替(尺貫法/メートル法)

ボタンでcmとinchなど単位表示を切り替えます。海外向けと国内向けで採寸表記が異なるアパレル系WordPressサイトの商品仕様欄に便利です。

i18njs

プレビュー

ソースコード

HTML

<div class="d03-04-08-box">
          <div class="d03-04-08-value">180<span class="d03-04-08-unit">cm</span></div>
          <div class="d03-04-08-btns">
            <button class="d03-04-08-btn is-active" data-mode="metric">メートル法</button>
            <button class="d03-04-08-btn" data-mode="imperial">尺貫法/インチ</button>
          </div>
        </div>

CSS

.d03-04-08-box{text-align:center}
        .d03-04-08-value{font-size:32px;font-weight:800;color:#111827;margin-bottom:14px;font-variant-numeric:tabular-nums}
        .d03-04-08-unit{font-size:16px;color:#6b7280;margin-left:4px}
        .d03-04-08-btns{display:flex;gap:6px;justify-content:center}
        .d03-04-08-btn{padding:7px 12px;border:1px solid #d1d5db;border-radius:6px;background:#fff;
          color:#374151;font-size:12px;font-weight:700;cursor:pointer}
        .d03-04-08-btn.is-active{background:#b45309;color:#fff;border-color:#b45309}

JavaScript

(function(){
        var root=document.querySelector('#item-03-04-08 .d03-04-08');
        var value=root.querySelector('.d03-04-08-value');
        root.querySelectorAll('.d03-04-08-btn').forEach(function(btn){
          btn.addEventListener('click',function(){
            root.querySelectorAll('.d03-04-08-btn').forEach(function(b){b.classList.remove('is-active');});
            btn.classList.add('is-active');
            var metric=btn.getAttribute('data-mode')==='metric';
            value.innerHTML=metric?'180<span class="d03-04-08-unit">cm</span>':'70.9<span class="d03-04-08-unit">inch</span>';
          });
        });
      })();

クラス名 .d03-04-08 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。