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

HTMLDOMFigureオブジェクト

HTML DOM Figureオブジェクトは、HTMLの

要素を表すために使用されます。 figureオブジェクトを使用してfigure要素を動的に作成してアクセスできます。

構文

以下は、Figureオブジェクトを作成するための構文です-

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

例

以下は、Figureオブジェクトを作成する方法です-

<!DOCTYPE html>
<html>
<head>
<script>
   function createFigure(){
      var fig = document.createElement("FIGURE");
      fig.setAttribute("id", "Figure1");
      document.body.appendChild(fig);
      var i = document.createElement("IMG");
      i.setAttribute("src", "https://www.tutorialspoint.com/servlets/images/servletsmini-logo.jpg");
      i.setAttribute("width", "250");
      i.setAttribute("height", "200");
      i.setAttribute("alt", "Eiffel Tower");
      fig.appendChild(i);
   }
</script>
</head>
<body>
<h2>HTML DOM figure object</h2>
<button onclick="createFigure()">CREATE</button><br><br>
</body>
</html>

出力

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

HTMLDOMFigureオブジェクト

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

HTMLDOMFigureオブジェクト

上記の例では-

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

<button onclick="createFigure()">CREATE>/button><br><br>

createFigure（）関数は、ドキュメントオブジェクトのcreateElement（）メソッドを使用してFigure要素を作成します。 setAttribute（）を使用して、figure要素のIDを設定し、最後に、appendChild（）メソッドを使用してドキュメントの本文に追加します。次に、画像をFigure要素内に配置するための別の要素imgを作成します。

setAttribute（）メソッドを使用して、img要素のsrc、width、height、およびaltの値を設定します。最後に、img要素はappendChild（）メソッドを使用してfigure要素の子として追加されます-

function createFigure(){
   var fig = document.createElement("FIGURE");
   fig.setAttribute("id", "Figure1");
   document.body.appendChild(fig);
   var i = document.createElement("IMG");
   i.setAttribute("src", "EiffelTower.jpg");
   i.setAttribute("width", "250");
   i.setAttribute("height", "200");
   i.setAttribute("alt", "Eiffel Tower");
   fig.appendChild(i);
}

  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