HTML DOM Input Range用法及代碼示例

HTML DOM中的Input Range對象用於表示type =“ range”的HTML <input>元素。

該標簽用於訪問或創建<input>元素。可以使用getElementById()方法訪問此元素。

用法:

document.getElementById("Input_ID");

此Input_ID分配給HTML <input>元素。

示例1：使用document.getElementById(“Geek_Range”)從“Geek_Range” id返回<input>元素的名稱

<!DOCTYPE html>   
<html>   
    <head>  
        <title>  
            HTML DOM RANGE Object  
        </title>  
    </head>  
    <style> 
    #Geek_p{ 
       font-size:30px; 
       color:green; 
    } 
    </style> 
    <body style = "text-align:center;">   
    
        <h1 style = "color:green;" >   
            GeeksForGeeks   
        </h1>   
            
        <h2>DOM Input Range Object</h2>   
        <input name = Geek_range 
               type="range"
               id="Geek_Range" 
                value="90"> 
        <br> 
        <br> 
        <button onclick = "myGeeks()">  
            Click Here  
        </button>  
        <p id="Geek_p"></p> 
        <script>  
            function myGeeks() { 
             var x = document.getElementById("Geek_Range").name; 
             document.getElementById("Geek_p").innerHTML = x; 
          } 
        </script>  
    </body>   
</html>

輸出

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

示例-2：使用document.getElementById(“Geek_Range”)從“Geek_Range” id返回<input>元素的值

<!DOCTYPE html>   
<html>   
    <head>  
        <title>  
            HTML DOM RANGE Object  
        </title>  
    </head>  
    <style> 
    #Geek_p{ 
       font-size:30px; 
       color:green; 
    } 
    </style> 
    <body style = "text-align:center;">   
    
        <h1 style = "color:green;" >   
            GeeksForGeeks   
        </h1>   
            
        <h2>DOM Input Range Object</h2>   
        <input name = Geek_range 
               type="range" 
               id="Geek_Range" 
               value="90"> 
        <br> 
        <br> 
        <button onclick = "myGeeks()">  
            Click Here  
        </button>  
        <p id="Geek_p"></p> 
        <script>  
            function myGeeks() { 
             var x = document.getElementById("Geek_Range").value; 
             document.getElementById("Geek_p").innerHTML = x; 
          } 
        </script>  
    </body>   
</html>

輸出

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

示例3：創建類型為“range”的<input>元素。

<!DOCTYPE html>   
<html>   
    <head>  
        <title>  
            HTML DOM RANGE Object  
        </title>  
    </head>  
    <style> 
    </style> 
    <body style = "text-align:center;">   
    
        <h1 style = "color:green;" >   
            GeeksForGeeks   
        </h1>   
            
        <h2>DOM Input Range Object</h2>   
        <br> 
        <button onclick = "myGeeks()">  
            Click Here  
        </button>  
        <p id="Geek_p"></p> 
        <script>  
            function myGeeks() { 
              var x = document.createElement("INPUT"); 
              x.setAttribute("type", "range"); 
              document.body.appendChild(x); 
          } 
        </script>  
    </body>   
</html>

輸出

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

支持的瀏覽器：

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

相關用法

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