使用javascript更改区域标签的坐标答案

【问题标题】：Change coords of area tag using javascript使用javascript更改区域标签的坐标
【发布时间】：2014-11-06 14:29:17
【问题描述】：

我正在尝试使用 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;
}

【问题讨论】：

一个好的问题通常应该提供有关您想要实现的目标的更多信息。还有一些上下文，因为它可能会影响完整答案必须包含的内容......

标签： javascript area coords

【解决方案1】：

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

document.getElementById(areaID).coords = newCoords

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

【讨论】：

不，但这（jsfiddle.net/6348jamj/8）有效。 DIV 元素没有 coords 属性，这就是您的示例不起作用的原因。

【解决方案2】：

使用setAttribute:

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

DEMO

【讨论】：