HTML DOM Input Image用法及代碼示例

HTML DOM中的Input Image對象用於表示type =“ image”的HTML <input>元素。該標簽用於訪問或創建元素。可以使用getElementById()方法訪問此元素。

用法:

document.getElementById("MyImage");

返回值：它返回type =“ image”的<input>標簽的屬性。

屬性值：

值	描述
alt	設置/返回輸入圖像的alt屬性的值。
autofocus	設置/返回頁麵加載時輸入圖像是否自動獲得焦點。
defaultValue	設置/返回輸入圖像的默認值。
disabled	設置/返回是否禁用輸入圖像。
form	返回包含輸入圖像的表單的引用。
formAction	設置/返回輸入圖像的formaction屬性的值。
formEnctype	設置/返回輸入圖像的formenctype屬性的值。
formMethod	設置/返回輸入圖像的formmethod屬性的值。
formNoValidate	設置/返回提交時是否驗證form-data。
formTarget	設置/返回輸入圖像的formtarget屬性的值。
height	設置/返回輸入圖像的height屬性值。
name	設置/返回輸入圖像的名稱屬性的值。
src	設置/返回輸入圖像的src屬性值。
type	返回輸入元素的表單元素的類型。
value	設置/返回輸入圖像的value屬性的值。
width	設置/返回輸入圖像的width屬性值。

示例1：訪問輸入元素並返回ID，類型和寬度。

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        HTML DOM Input Image Object 
    </title> 
</head> 
  
<body style="text-align:center;"> 
  
    <h1 style="color:green;">   
            GeeksForGeeks   
        </h1> 
  
    <h2>DOM Input Image Object</h2> 
    <button onclick="my_geek()"> 
        <input id="myImage" 
               type="image" 
src="https://media.geeksforgeeks.org/wp-content/uploads/gfg-40.png"
               alt="Submit" 
               width="48" 
               height="48"> 
    </button> 
    <h2 id="Geek_h" style="color:green;">  
  
        </h2> 
    <script> 
        function my_geek() { 
            
            // Access myImage and return id  
            var txt = document.getElementById( 
              "myImage").id; 
            
            txt = "id = " + txt + ", "; 
            
            // Return type 
            txt += "type = " + document.getElementById( 
              "myImage").type + ", "; 
            
            // Return Width 
            txt += "width = " + document.getElementById( 
              "myImage").width; 
            document.getElementById( 
              "Geek_h").innerHTML = txt; 
        } 
    </script> 
</body> 
  
</html>

輸出

在單擊按鈕之前：
單擊按鈕後：

示例-2：訪問輸入元素並返回目標，高度和高度。

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        HTML DOM Input Image Object 
    </title> 
</head> 
  
<body style="text-align:center;"> 
  
    <h1 style="color:green;">  
            GeeksForGeeks  
        </h1> 
  
    <h2>DOM Input Image Object</h2> 
    <button onclick="my_geek()"> 
        <input id="myImage"
               type="image" 
               formtarget="#"
src="https://media.geeksforgeeks.org/wp-content/uploads/gfg-40.png" 
               alt="Submit" 
               width="48" 
               height="48"> 
    </button> 
    
    <h2 id="Geek_h" style="color:green;">  
  
        </h2> 
    <script> 
        function my_geek() { 
            
            // Return target, alt and height. 
            var txt = document.getElementById( 
              "myImage").formTarget; 
            txt = "formTarget = " + txt + ", "; 
            txt += "alt = " + document.getElementById( 
              "myImage").alt + ", "; 
            txt += "height = " + document.getElementById( 
              "myImage").height; 
            document.getElementById( 
              "Geek_h").innerHTML = txt; 
        } 
    </script> 
</body> 
  
</html>

輸出

在單擊按鈕之前：
單擊按鈕後：

示例3：訪問Input元素並返回formTarget，formEnctype和formAction。

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        HTML DOM Input Image Object 
    </title> 
</head> 
  
<body style="text-align:center;"> 
  
    <h1 style="color:green;">   
            GeeksForGeeks   
        </h1> 
  
    <h2>DOM Input Image Object</h2> 
    <button onclick="my_geek()"> 
        <input id="myImage"
               type="image" 
src="https://media.geeksforgeeks.org/wp-content/uploads/gfg-40.png" 
               alt="Submit" 
               formaction="#" 
               formtarget="#" 
               formenctype="text/plain"
               width="48" 
               height="48"> 
    </button> 
    <h2 id="Geek_h" style="color:green;">  
  
        </h2> 
    <script> 
        function my_geek() { 
            
            // Return formTarget, formEnctype and formAction. 
            var txt = document.getElementById( 
              "myImage").formTarget; 
            txt = "formTarget = " + txt + ", "; 
            txt += "formEnctype = " + document.getElementById( 
              "myImage").formEnctype + ", "; 
            txt += "formAction = " + document.getElementById( 
              "myImage").formAction; 
            document.getElementById( 
              "Geek_h").innerHTML = txt; 
        } 
    </script> 
</body> 
  
</html>

輸出

在單擊按鈕之前：
單擊按鈕後：

支持的瀏覽器：

穀歌瀏覽器
火狐瀏覽器
Edge
Safari
Opera

相關用法

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