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

HTMLDOMダイアログオブジェクト

HTML DOM Dialogオブジェクトは、HTML5の

要素に関連付けられています。 Webページ上にポップアップやモーダルなどを作成するために使用されます。ダイアログボックスを表示し、ユーザーがダイアログボックスを操作できるようにするには、開く属性値を設定する必要があります。

プロパティ

Dialogオブジェクトのプロパティは次のとおりです-

プロパティ 説明
開く ダイアログを開くかどうかを設定または返す。
returnValue
ダイアログの戻り値を設定または返すため。

メソッド

Dialogオブジェクトのメソッドは次のとおりです-

メソッド 説明
close（） ダイアログを閉じるには。
show（） ダイアログを表示します。
showModal（） 最上位のダイアログボックスを作成して表示します。

構文

以下は、-

の構文です。

ダイアログオブジェクトの作成-

var p = document.createElement("DIALOG");

例

HTMLDOMダイアログオブジェクトの例を見てみましょう-

<!DOCTYPE html>
<html>
<head>
<title>DIALOG OBJECT</title>
<style>
   dialog{
      border:2px solid blue;
      font-weight:bold;
   }
</style>
</head>
<body>
<p> Clicking on the button below will create a dialog element</p>
<button onclick="createDialog()">CREATE</button>
<script>
   function createDialog() {
      var dlg = document.createElement("DIALOG");
      var dlgTxt = document.createTextNode("DIALOG WINDOW with a button");
      var bl=document.createElement("BR");
      var btn = document.createElement("BUTTON");
      var btnText=document.createTextNode("CLICK HERE");
      dlg.setAttribute("open", "open");
      dlg.appendChild(dlgTxt);
      dlg.appendChild(bl);
      btn.appendChild(btnText);
      dlg.appendChild(btn);
      document.body.appendChild(dlg);
   }
</script>
</body>
</html>

出力

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

HTMLDOMダイアログオブジェクト

[作成]ボタンをクリックすると-

HTMLDOMダイアログオブジェクト

上記の例では-

最初に、ユーザーがクリックしたときにcreateDialog（）関数を実行するCREATEボタンを作成しました-

<button onclick="createDialog()">CREATE</button>

createDialog（）関数は、createElement（）メソッドを使用して

要素を作成します。次に、createTextNode（）メソッドを使用してテキストを追加します。次に、createElement（）メソッドを使用して要素内にボタンを作成し、createTextNode（）メソッドを使用してボタンテキストを追加します。

setAttribute（）メソッドを使用して、ユーザーに表示するダイアログボックスのopen属性値を設定します。最後に、ダイアログボックスとその中のボタンがdocument.body appendChild（）メソッドを使用してドキュメント本体に追加され、

要素と
  1. HTMLDOMHRオブジェクト

    HTML DOM HRオブジェクトは、HTMLドキュメントの要素を表します。 hrオブジェクトを作成- 構文 以下は構文です- document.createElement(“HR”); hrオブジェクトの例を見てみましょう- 例 <!DOCTYPE html> <html> <style>    body {       text-align: center;       background-color: #fff;    

  2. HTMLDOMUlオブジェクト

    HTMLのHTMLDOMUlオブジェクトは、 を表します 要素。 を作成する 要素 var ulObject = document.createElement(“UL”) ここでは、「ulObject」 次のプロパティを持つことができますが、 HTML5ではサポートされていません − プロパティ 説明 コンパクト 順不同リストを通常より小さく表示するかどうかを設定/返します タイプ 順序付けされていないリストのtype属性の値を設定/返します 順不同リストの例を見てみましょう 要素- 例 <!DOCTYPE