HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOMBdodirプロパティ

HTML DOM Bdo dirプロパティは、HTMLの要素に関連付けられています。ここで、bdoはBi-DirectionalOverrideの略です。 タグは、現在のテキストの方向（デフォルトでは左から右）を上書きするために使用されます。 bdo dirプロパティは、要素のdir属性値を設定または返します。 要素にはdirプロパティが必須です。テキストフローの方向を指定します。

構文

以下は、-

の構文です。

dirプロパティの設定-

bdoObject.dir = "ltr|rtl"

ここで、ltrは左から右へのテキスト方向ですが、rtlは右から左へのテキスト方向です。

dirプロパティを返す-

bdoObject.dir

例

HTML DOMbdodirプロパティの例を見てみましょう-

<!DOCTYPE html>
<html>
<body>
<h3><bdo id="myBdo" dir="rtl">RIGHT-TO-LEFT</bdo></h3>
<p>Click the below button to get text direction of the above text</p>
<button onclick="getDirection()">GET DIRECTION</button>
<button onclick="setDirection()">SET DIRECTION</button>
<p id="Sample"></p>
<script>
   function getDirection() {
      var x = document.getElementById("myBdo").dir;
      document.getElementById("Sample").innerHTML ="The text direction is from " + x;
   }
   function setDirection(){
      document.getElementById("myBdo").dir="ltr";
   }
</script>
</body>
</html>

出力

これにより、次の出力が生成されます-

HTML DOMBdodirプロパティ

[方向を取得]をクリックすると-

HTML DOMBdodirプロパティ

SETDIRECTION-

をクリックすると

HTML DOMBdodirプロパティ

上記の例では-

最初に、内に要素を作成しました

dir属性値が「rtl」に設定されている要素-

<h3><bdo id="myBdo" dir="rtl">RIGHT-TO-LEFT</bdo></h3>

次に、getDirection（）関数とsetDirection（）関数をそれぞれ実行するための2つのボタンGETDIRECTIONとSETDIRECTIONを作成しました-

<button onclick="getDirection()">GET DIRECTION</button>
<button onclick="setDirection()">SET DIRECTION</button>

getDirection（）関数は、IDが「myBdo」に関連付けられている要素（この場合は要素）を取得します。次に、要素から取得したdirプロパティ値が変数xに割り当てられます。値は、ID「Sample」が関連付けられている段落に表示されます- 

function getDirection() {
   var x = document.getElementById("myBdo").dir;
   document.getElementById("Sample").innerHTML ="The text direction is from " + x;
}

setDirection（）関数は、ID「mybdo」で要素を取得し、そのdirプロパティ値を「ltr」に設定します。これは左から右を意味します。これはデフォルトのテキスト方向でもあります-

function setDirection(){
   document.getElementById("myBdo").dir="ltr";
}

  1. HTMLDOMtextContentプロパティ

    HTML DOM textContentプロパティは、ノードとそのすべての子ノードのテキスト（空白を含む）に対応する文字列を返す/設定します。 以下は構文です- 文字列値を返す Node.textContent ここで、戻り値は次のようになります- ドキュメントノードの「Null」 指定されたノードとそのすべての子ノードのテキスト textContentを文字列値に設定します Node.textContent = string 注：HTML DOM textContent プロパティは、ノードと子ノードのテキストを単一のテキスト文字列として設定します。 HTML DOM

  2. HTMLDOMOlタイププロパティ

    HTML DOM Ol typeプロパティは、順序付きリストで使用されるマーカーのタイプに対応するtype属性の値を設定/返します。 以下は構文です- タイププロパティを返す olObject.type 設定タイプ キャラクターに olObject.type = ‘1|a|A|i|I’ Olタイプの例を見てみましょう プロパティ- 例 <!DOCTYPE html> <html> <head> <title>HTML DOM Ol type</title> <style>   &n