HTMLDOMアンカーのユーザー名プロパティ
アンカータグに関連付けられたHTMLDOMアンカーusernameプロパティは、href属性のusername部分の値を設定または返すために使用されます。ユーザー名はユーザーが入力し、多くの場合、ユーザー名とパスワードのペアで使用されます。ユーザー名の値は、プロトコルの後、リンクのパスワード部分の直前に指定されます。
構文
以下は、-
の構文です。ユーザー名プロパティを返す-
anchorObject.username
ユーザー名プロパティの設定-
anchorObject.username = UsernameValue
例
アンカーユーザー名プロパティの例を見てみましょう-
<!DOCTYPE html> <html> <body> <p><a id="Anchor"href="https://john:[email protected]">ExampleSite</a></p> <p>Click the button to change username</p> <button onclick="changeUser()">Set User</button> <button onclick="GetUser()">Get User</button> <p id="Sample"></p> <script> function changeUser() { document.getElementById("Anchor").username = "Rohan"; } function GetUser() { var x=document.getElementById("Anchor").username; document.getElementById("Sample").innerHTML = x; } </script> </body> </html>
出力
次の出力が生成されます-
「ユーザーの設定」をクリックすると-
「ユーザーを取得」をクリックすると-
上記の例では-
ユーザー名がjohn、パスワードがjohn123のリンクを取得しました。
<p><a id="Anchor" href="https://john:[email protected]">ExampleSite</a></p>
次に、「ユーザーの設定」と「ユーザーの取得」の2つのボタンがあり、それぞれ関数changeUser()とGetUser()を実行します。
<button onclick="changeUser()">Set User</button> <button onclick="GetUser()">Get User</button>
changeUser()関数は、リンクで指定されたユーザー名を、当社が指定したユーザー名に変更します。私たちの場合は「ローハン」。 GetUser()関数は、ID Anchorが関連付けられたリンクからユーザー名を取得し、GetUser()の前にchangeUser()が呼び出された場合にのみ「Rohan」を返します。それ以外の場合は、「john」になります。
function changeUser() { document.getElementById("Anchor").username = "Rohan"; } function GetUser() { var x=document.getElementById("Anchor").username; document.getElementById("Sample").innerHTML = x; }
-
HTMLDOMアンカーのrelプロパティ
HTML DOM Anchor Relプロパティは、リンクのrel属性を返します。 rel属性は、実行中のドキュメントとリンクされたドキュメントの間の関連付けを記述します。 構文 以下は、-の構文です。 a)relプロパティを返す- anchorObject.rel b)relプロパティ&minusを設定します anchorObject.rel = "value" 例 HTMLDOMアンカーのrelプロパティの例を見てみましょう- <!DOCTYPE html> <html> <body> <h1>Ex
-
HTMLDOMアンカーのホスト名プロパティ
HTML DOMアンカーのホスト名プロパティは、URLのホスト名のみを返します。ドメイン名を返します。 構文 以下は、ホスト名プロパティを設定するための構文です- anchorObj.hostname = hostname 上記では、ホスト名はURLのホスト名です。 構文 以下は、ホスト名プロパティを返す構文です- anchorObj.hostname 例 DOMアンカーのホスト名プロパティを実装する例を見てみましょう- <!DOCTYPE html> <html> <body> <h1>Company</h1> <p&