HTML | DOM 输入范围对象

HTML DOM 中的Input Range 对象用于表示 type=”range”的 HTML 元素。

此标记用于访问或创建元素。可以使用 getElementById()方法访问此元素。

句法：

document.getElementById("Input_ID");

这个 Input_ID 被分配给 HTML 元素。

示例 1：使用document.getElementById(“Geek_Range”)从“Geek_Range” id 返回 元素的名称

  
  
     
         
            HTML DOM RANGE Object 
         
     
    
    #Geek_p{
       font-size:30px;
       color:green;
    }
    
      
    
          
            GeeksForGeeks  
          
            
        DOM Input Range Object  
        
        
        
         
            Click Here 
         
        
         
            function myGeeks() {
             var x = document.getElementById("Geek_Range").name;
             document.getElementById("Geek_p").innerHTML = x;
          }
         
      
 

输出

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

示例 2：使用document.getElementById(“Geek_Range”)从“Geek_Range” id 返回 元素的值

  
  
     
         
            HTML DOM RANGE Object 
         
     
    
    #Geek_p{
       font-size:30px;
       color:green;
    }
    
      
    
          
            GeeksForGeeks  
          
            
        DOM Input Range Object  
        
        
        
         
            Click Here 
         
        
         
            function myGeeks() {
             var x = document.getElementById("Geek_Range").value;
             document.getElementById("Geek_p").innerHTML = x;
          }
         
      
  

输出

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

  示例 3：创建 type = “range”的 < input > 元素。

    
    
       
           
              HTML DOM RANGE Object 
           
       
      
      
        
      
            
              GeeksForGeeks  
            
              
          DOM Input Range Object  
          
           
              Click Here 
           
          
           
              function myGeeks() {
                var x = document.createElement("INPUT");
                x.setAttribute("type", "range");
                document.body.appendChild(x);
            }
           
        
   

  输出

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

  支持的浏览器：

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