HTML DOM Area用法及代码示例

HTML DOM中的Area Object属性用于创建和访问对象中的<area>元素。例如，使图像区域可点击，并通过可在Map或其他对象中进一步使用的数据访问其他数据。

用法:

它用于访问<area>元素。

var x = document.getElementById("myArea");

它用于创建<area>元素。
```
var x = document.createElement("AREA");
```

属性值：

值	描述
alt	它用于设置或返回区域的alt属性的值。
coords	它用于设置或返回区域的coords属性的值。
hash	它用于设置或返回href属性值的锚点部分。
host	它用于设置或返回href属性值的主机名和端口部分。
hostname	它用于设置或返回href属性值的主机名部分。
href	它用于设置或返回区域的href属性值。
noHref	它用于设置或返回区域的nohref属性的值。
origin	它用于返回href属性值的协议，主机名和端口部分。
password	它用于设置或返回href属性值的密码部分。
pathname	它用于设置或返回href属性值的路径名部分。
port	它用于设置或返回href属性值的端口部分。
protocol	它用于设置或返回href属性值的协议部分。
search	它用于设置或返回href属性值的querystring部分。
shape	它用于设置或返回区域的shape属性的值。
target	它用于设置或返回区域的目标属性的值。
username	它用于设置或返回href属性值的用户名部分。

示例1：返回可点击图片的href属性。

<!DOCTYPE html> 
<html> 
<title> 
    HTML DOM Area Object Property 
</title> 
  
<body> 
    <h4>Click the button</h4> 
    <button onclick="GFG()">Click Here! 
        <br> 
    </button> 
    <map name="Geeks1"> 
        <area id="Geeks"
              shape="rect"
              coords="0, 0, 110, 100"
              alt="Geeks"
              href= 
"https://media.geeksforgeeks.org/wp-content/uploads/a1-21.png"> 
    </map> 
  
    <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/a1-25.png" 
         width="300" 
         height="100"
         alt="Geeksforgeeks"
         usemap="#Geeks1"> 
    
    <p id="GEEK!"></p> 
    
    <script> 
        function GFG() { 
            
            //  Return href attribute. 
            var x =  
            document.getElementById("Geeks").href; 
            
            document.getElementById( 
            "GEEK!").innerHTML = x; 
        } 
    </script> 
</body> 
  
</html>

输出：

示例-2：创建区域元素并设置href属性。

<!DOCTYPE html> 
<html> 
<title> 
    HTML DOM Area Object Property 
</title> 
  
<body> 
    <h4>Click the button</h4> 
    <button onclick="GFG()">Click Here! 
        <br> 
    </button> 
    <p></p> 
    <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/a1-25.png"
         width="300"
         height="100" 
         usemap="#planetmap"> 
    
    <map id="myMap" name="planetmap"> 
    </map> 
    
    <p id="GEEK!"></p> 
  
    <script> 
        function GFG() { 
            
            // creating area element using  
            // document.createElement("AREA"); 
            var y = document.createElement("AREA"); 
            y.setAttribute("href", 
"https://media.geeksforgeeks.org/wp-content/uploads/a1-24.png"); 
            y.setAttribute("shape", "rect"); 
            y.setAttribute("coords", "190, 0, 300, 100"); 
            document.getElementById("myMap").appendChild(y); 
  
            document.getElementById("GEEK!").innerHTML = 
                "Click on the GEEKS area in the image."; 
        } 
    </script> 
</body> 
  
</html>

输出：

执行上述代码的步骤：

保存文件
在标准浏览器上执行。

支持的浏览器：下面列出了DOM Area Object属性支持的浏览器：

谷歌浏览器5.0
Internet Explorer 8.0
Firefox 3.6
Safari 5.0
Opera 10.6

相关用法

注：本文由纯净天空筛选整理自SHUBHAMSINGH10大神的英文原创作品 HTML | DOM Area Object。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。