HTMLDOMダイアログオブジェクト
HTML DOM Dialogオブジェクトは、HTML5の
プロパティ
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> 出力
これにより、次の出力が生成されます-
[作成]ボタンをクリックすると-
上記の例では-
最初に、ユーザーがクリックしたときにcreateDialog（）関数を実行するCREATEボタンを作成しました-
<button onclick="createDialog()">CREATE</button>
createDialog（）関数は、createElement（）メソッドを使用して
setAttribute（）メソッドを使用して、ユーザーに表示するダイアログボックスのopen属性値を設定します。最後に、ダイアログボックスとその中のボタンがdocument.body appendChild（）メソッドを使用してドキュメント本体に追加され、
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);
} -
HTMLDOMHRオブジェクト
HTML DOM HRオブジェクトは、HTMLドキュメントの要素を表します。 hrオブジェクトを作成- 構文 以下は構文です- document.createElement(“HR”); hrオブジェクトの例を見てみましょう- 例 <!DOCTYPE html> <html> <style> body { text-align: center; background-color: #fff;
-
HTMLDOMUlオブジェクト
HTMLのHTMLDOMUlオブジェクトは、 を表します 要素。 を作成する 要素 var ulObject = document.createElement(“UL”) ここでは、「ulObject」 次のプロパティを持つことができますが、 HTML5ではサポートされていません − プロパティ 説明 コンパクト 順不同リストを通常より小さく表示するかどうかを設定/返します タイプ 順序付けされていないリストのtype属性の値を設定/返します 順不同リストの例を見てみましょう 要素- 例 <!DOCTYPE