HTML DOM Output用法及代碼示例

HTML DOM 輸出對象用於表示 HTNL <Output> 標簽。輸出元素由 getElementById() 訪問。

用法:

document.getElementById("id");

其中 “id” 是分配給“輸出”標簽的 ID。

值：

default Value:它用於設置或返回 <output> 元素的默認值。
form: 它返回對 <output> 元素所屬表單的引用。
htmlFor:它用於返回 <output> 元素的屬性的值。
labels: 它用於返回與 <output> 元素關聯的標簽元素列表。
name:它用於設置或返回 <output> 元素的 name 屬性的值。
類型：它返回 Output 對象代表的 HTML 元素類型。
value:它用於設置或返回 <output> 元素的 value 屬性的值。

範例1：下麵的 HTML 代碼返回輸出元素的值。通過使用 getElementById() 方法訪問輸出標簽。

HTML


<!DOCTYPE html>
<html>
  
<head>
    <title>
        HTML DOM Output Object
    </title>
    <style>
        body {
            text-align:center;
        }
  
        h1 {
            color:green;
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
    <h2>
        HTML DOM Output Object
    </h2>
    <form oninput="sumresult.value = parseInt(A.value)
                + parseInt(B.value) + parseInt(C.value)">
        <input type="number" name="A" value="50" /> +
  
        <input type="range" name="B" value="0" /> +
  
        <input type="number" name="C" value="50" />
        <br /> Submit Result:
        <output name="sumresult" id="geeks" for="A B C">
        </output>
        <br>
        <br>
    </form>
    <Button onclick="myGeeks()">Submit</Button>
    <h2 id="sudo"></h2>
  
    <script>
        function myGeeks() {
            var x = document.getElementById("geeks").value;
            document.getElementById("sudo").innerHTML = x;
        }
    </script>
  
</body>
  
</html>

輸出：

範例2：可以使用 document.createElement 方法創建輸出對象。

HTML


<!DOCTYPE html>
<html>
  
<body>
    <center>
        <h2 style="color:green;">
            GeeksForGeeks
        </h2>
        <h2 style="color:green;">
            HTML DOM Output Object
        </h2>
  
        <p>
            Click the Beliw button to 
            create an OUTPUT element.
        </p>
  
        <form id="GFG" oninput=
            "x.value=parseInt(a.value)+parseInt(b.value)">0
            <input type="range" id="a" value="50">100
            +<input type="number" id="b" value="50">=
        </form>
        <br>
  
        <button onclick="Create()">Try it</button>
  
        <p id="sudo"></p>
    </center>
  
    <script>
        function Create() {
  
            // Create an output tag
            var x = document.createElement("OUTPUT");
            x.setAttribute("name", "x");  // Set name attribute
            x.setAttribute("for", "a b"); // Set firm attribute 
            document.getElementById("GFG").appendChild(x);
            document.getElementById("sudo").innerHTML =
                `The output element was created. You can 
                Change the value of the range or number 
                field to see the result of a calculation.`;
        }
    </script>
</body>
  
</html>

輸出：

相關用法

注：本文由純淨天空篩選整理自ManasChhabra2大神的英文原創作品 HTML DOM Output Object。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。