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

HTMLDOMアンカーターゲットプロパティ

アンカータグ（）に関連付けられたHTML DOMターゲットプロパティは、URLをクリックした後に新しいWebページが開く場所を指定します。次の値をとることができます-

  • _blank-これにより、リンクされたドキュメントが新しいウィンドウで開きます。
  • _parent-これにより、リンクされたドキュメントが親フレームセットで開きます。
  • _top-これにより、リンクされたドキュメントがフルボディウィンドウで開きます。
  • _self-これにより、リンクされたドキュメントが同じウィンドウで開きます。これがデフォルトの動作です
  • framename-これにより、リンクされたドキュメントが指定されたフレーム名で開きます。

構文

以下は、-

の構文です。

ターゲットプロパティを返す-

anchorObject.target

ターゲットプロパティの設定-

anchorObject.target = "_blank|_self|_parent|_top|framename"

例

アンカーターゲットプロパティの例を見てみましょう-

<!DOCTYPE html>
<html>
<body>
<p><a id="Anchor" target="_self" href="https://www.examplesite.com">example site</a></p>
<p><a id="Anchor2" href="https://www.examplesite.com">example site</a></p>
<p>Click the button to see the value of the target attribute.</p>
<button onclick="getTarget1()">GetTarget</button>
<button onclick="setTarget2()">SetTarget</button>
<p id="Target1"></p>
<script>
   function getTarget1() {
      var x = document.getElementById("Anchor").target;
      document.getElementById("Target1").innerHTML = x;
   }
   function setTarget2(){
      document.getElementById("Anchor2").innerHTML="Target has been set";
      document.getElementById("Target1").target="newframe";
   }
</script>
</body>
</html>

出力

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

HTMLDOMアンカーターゲットプロパティ

「GetTarget」ボタンをクリックした後-

HTMLDOMアンカーターゲットプロパティ

「SetTarget」ボタンをクリックした後-

HTMLDOMアンカーターゲットプロパティ

上記の例では-

ターゲット属性と値が_selfのアンカータグと、デフォルトの_blank-

のアンカータグを1つずつ取得しました。 
<p><a id="Anchor" target="_self" href="https://www.examplesite.com">example site</a></p>
<p><a id="Anchor2" href="https://www.examplesite.com">example site</a></p>

次に、getTarget1（）関数とsetTarget2（）関数をそれぞれ実行するために、GetTargetとSetTargetという名前の2つのボタンを作成しました。

<button onclick="getTarget1()">GetTarget</button>
<button onclick="setTarget2()">SetTarget</button>

getTarget1（）は、最初のリンクからターゲット値を取得し、id =” Target1”の段落タグに表示されます。 setTarget2（）は、link2のターゲット値をデフォルトの_blankからカスタムフレーム「newframe」に設定します。

function getTarget1() {
   var x = document.getElementById("Anchor").target;
   document.getElementById("Target1").innerHTML = x;
}
function setTarget2(){
   document.getElementById("Target1").innerHTML="Target has been set";
   document.getElementById("Anchor2").target="_blank";
}

  1. HTMLDOMdesignModeプロパティ

    HTML DOM designModeプロパティを使用すると、ドキュメント全体を編集可能かどうかを指定できます。これにより、HTMLドキュメントを編集できるため、HTMLドキュメントがWYSIWYG（What You See Is What You Get）エディターとして機能します。このプロパティはデフォルトで「オフ」に設定されており、「オン」に設定することでドキュメントを編集できます。 構文 以下は、-の構文です。 designModeプロパティの設定- document.designMode = "on|off" ここで、「オフ」はデフォルト値であり、「オン」に

  2. HTMLDOMアンカーのホスト名プロパティ

    HTML DOMアンカーのホスト名プロパティは、URLのホスト名のみを返します。ドメイン名を返します。 構文 以下は、ホスト名プロパティを設定するための構文です- anchorObj.hostname = hostname 上記では、ホスト名はURLのホスト名です。 構文 以下は、ホスト名プロパティを返す構文です- anchorObj.hostname 例 DOMアンカーのホスト名プロパティを実装する例を見てみましょう- <!DOCTYPE html> <html> <body> <h1>Company</h1> <p&