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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。