HTMLElement: translate プロパティ

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2023年3月.

translate は HTMLElement インターフェイスのプロパティで、ページがローカライズされるとき、要素の属性値や Text ノードの子の値を対応させるか、そのままにするかを示します。

これは HTML の translate グローバル属性の値を反映します。

値

論理値で、ページがローカライズされるときに要素の属性値や Text ノードの子の値が翻訳される場合は true、そうでない場合は false です。

例

次の例は、スクリプトを使って翻訳を有効または無効にする方法を示しています。

html

<div>
  <span>The content may always be translated: </span>
  <span translate="yes">El contenido será traducido</div>
</div>
<div>
  <span id="translate-label">The content may be translated:</span>
  <span id="translate-element" translate="no">El contenido puede ser traducido.</div>
</div>
<input id="translate-controller" type="checkbox" /> Enable translation

const label = document.getElementById("translate-label");
const element = document.getElementById("translate-element");
const controller = document.getElementById("translate-controller");

controller.addEventListener("change", (e) => {
  if (controller.checked) {
    element.translate = true;
    label.innerText = "The content may be translated:";
  } else {
    element.translate = false;
    label.innerText = "The content may not be translated:";
  }
});