javascript - 使用javascript更改区域标签的坐标

Question

我正在尝试使用 JavaScript 更改区域标签的坐标。这是我的 HTML 代码：

<a onclick="changeCoords('area-1', '50,825,220,1225');">Button</a>                      
<img id="page-1" class="shadow margin-20 width-900" src="pics/pages/razei-harefua-1.jpg"     usemap="#research-map">
<map name="research-map">
    <area id="area-1" shape="rect" coords="110,980,390,1150" href="some URL">
</map> 

这是JavaScript：

function changeCoords(areaID, newCoords) {
    var x = document.getElementById(areaID).coords;
    x = newCoords;
}

Answer 1

如果您只是尝试使用 newCoords 更改 coords 属性，则只需编写：

document.getElementById(areaID).coords = newCoords

您的示例不起作用，因为您将 coords 的值分配给 x 变量，然后您只需将 x 的值更改为 newCoords 值。x 变量不是对 coords 属性的引用，它只是一个分配的内存空间，在您的情况下存储 coords 的值，然后该值被 newCoords 的值覆盖。

Answer 2

使用setAttribute：

function changeCoords(areaID, newCoords) {
    var x = document.getElementById(areaID);
    x.setAttribute('coords', newCoords);
}

演示