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

HTML DOMblur（）メソッド

HTML DOMのblur（）メソッドは、特定の要素からキーボードフォーカスを削除するために使用されます。ぼかしを使用して、任意のHTML要素にぼかしを追加または削除できます。ユーザー入力に基づいて要素に特に焦点を合わせることができるため、blur（）メソッドはWebページ内のナビゲーションを改善するのに役立ちます。

構文

以下はblur（）メソッドの構文です-

Object.blur()

例

blur（）メソッドの例を見てみましょう-

<!DOCTYPE html>
<html>
<head>
<style>
   a{
      text-decoration:none;
      font-size:20px;
   }
   a:focus, a:active {
      color: red;
      text-decoration:underline;
      font-size:40px;
   }
</style>
</head>
<body>
<a id="Anchor" href="https://example.com">example.com</a>
<p>Give focus or remove focus…</p>
<input type="button" onclick="getfocus()" value="Get focus">
<input type="button" onclick="losefocus()" value="Lose focus">
<script>
   function getfocus() {
      document.getElementById("Anchor").focus();
   }
   function losefocus() {
      document.getElementById("Anchor").blur();
   }
</script>
</body>
</html>

出力

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

HTML DOMblur（）メソッド

「フォーカスを取得」をクリックすると-

HTML DOMblur（）メソッド

「フォーカスを失う」をクリックすると、元の状態と同じになります-

HTML DOMblur（）メソッド

上記の例では-

最初に、IDが「Anchor」でhref =” https://www.example.com”-

のアンカータグを作成しました。 
<a id="Anchor" href="https://example.com">example.com</a>

次に、アンカータグに2つのスタイルを定義して、フォーカスされてアクティブになっているときとそうでないときを区別します。

a{
   text-decoration:none;
   font-size:20px;
}
a:focus, a:active {
   color: red;
   text-decoration:underline;
   font-size:40px;
}

次に、getfocus（）関数とlosefocus（）関数をそれぞれ実行するために、「フォーカスを取得」と「フォーカスを失う」の2つのボタンを作成しました。

<input type="button" onclick="getfocus()" value="Get focus">
<input type="button" onclick="losefocus()" value="Lose focus">

getfocus（）関数は、「Anchor」IDが関連付けられている要素（この場合は要素）を取得します。次に、focusメソッドを実行して、リンクをa：focus、a：activeスタイルに変更します。色は緑、テキストには下線が引かれ、フォントサイズは40pxに拡大されます。

function getfocus() {
   document.getElementById("Anchor").focus();
}

lostfocus（）関数は、「Anchor」IDが関連付けられている要素（この場合は要素）を取得します。次に、blur（）メソッドを実行して上記のリンクからフォーカスを失い、リンクスタイルを要素の元のスタイルに変更します。

function losefocus() {
   document.getElementById("Anchor").blur();
}

  1. HTML DOM hasAttributes（）メソッド

    HTML DOM hasAttributes（）メソッドは、要素に属性があるかどうかをチェックします。要素に属性が含まれている場合はtrueを返し、含まない場合はfalseを返します。このメソッドが要素ノード以外のノードで呼び出された場合、戻り値は常にfalseになります。 構文 以下は、hasAttribbutes（）メソッドの構文です- node.hasAttributes() 例 hasAttributes（）メソッドの例を見てみましょう- <!DOCTYPE html> <html> <body> <h1>hasAttributes(

  2. HTML DOM focus（）メソッド

    HTML DOM focus（）メソッドは、HTML要素にフォーカスを与えるために使用されます。フォーカスをすべてのHTML要素に適用することはできません。例：タグにフォーカスすることはできません。要素からフォーカスを削除するには、blur（）メソッドを使用します。 構文 以下は構文です- HTMLElementObject.focus() 例 focus（）メソッドの例を見てみましょう- <!DOCTYPE html> <html> <head> <style>    input[type=text]:focus, p: