HTML | DOM 图像对象

HTML DOM 中的Image Object用于表示 HTML 元素。
该标签用于设置或获取<图像>元素的属性。可以使用 getElementById()方法访问此元素。

句法：

document.getElementById("Image_ID");

这个 Image_ID 被分配给 HTML 元素。

示例 1：

  

    
    
    
        HTML | DOM Image Object
    

  

  
      
            GeeksForGeeks  
        
  
    HTML | DOM Image Object
  
    
        Click
    
    
      
  
    
        function myGeeks() {
  
            //   Creating IMG object.
            var x = document.createElement("IMG");
            
            x.setAttribute("src", 
"https://media.geeksforgeeks.org/wp-content/uploads/gfg-39.png");
            
            x.setAttribute("width", "304");
            x.setAttribute("height", "228");
            x.setAttribute("alt", "GFG_Logo");
            document.body.appendChild(x);
        }
    

  

输出

• 点击按钮前：
  
• 点击按钮后：
  

  >

  示例 2：

    
  
      
      
          HTML | DOM Image Object
      
  
    
  
    
        
              GeeksForGeeks  
          
    
      HTML | DOM Image Object
      
      
      
      
          Click
      
      
    
      
          function myGeeks() {
    
              //  Accessing image element.
              var x = 
              document.getElementById("myImg").src;
              
              document.getElementById(
                "Geek_p").innerHTML = x;
          }
      
  
    

  输出

  • 点击按钮前：
    

    点击按钮后：
    

  示例 3：

    
  
      
      
          HTML | DOM Image Object
      
  
    
  
    
        
              GeeksForGeeks  
          
    
      HTML | DOM Image Object
      
      
      
          Click
      
      
    
      
          function myGeeks() {
    
              //  Return Image width.
              var x = document.getElementById(
                "myImg").width;
              
              document.getElementById(
                "Geek_p").innerHTML = x;
          }
      
  
    

  输出

  • 点击按钮前：
    
  • 点击按钮后：
    

  支持的浏览器：

  • 谷歌浏览器
  • 火狐浏览器
  • 边缘
  • 苹果浏览器
  • 歌剧