Javascript DOM更改無效

Question

我正在嘗試使用圖像映射構建一個圖形，當您單擊“機翼”時，它將使其看起來像一個按鈕並按下它。

圖像映射已建立，onclick正常，但什么也沒發生？

這是代碼：

<!DOCTYPE html>
<html>
<head></head>
<body>
 <map name="location-map" style="cursor:pointer;">
  <area id="spot_1" onClick="set_spot(this.id)" shape="poly" coords="66,78,122,38,194,15,186,106,174,112,160,118" />
 </map>
 <img src="PH.png" usemap="#location-map" id="spot_1" style="position:absolute;top:0px;left:0px;width:402px;height:302px;" />

 <script type="text/javascript">
  function set_spot(mouse_over_name) {
    document.getElementById(mouse_over_name).style.display="none";
  };
 </script>

</body>
</html>

應該隱藏圖像嗎？

我看過其他解決方案，說JavaScript的位置必須在元素之后。 我在每個位置都嘗試過該腳本，但結果總是一樣。 沒變。 我也嘗試將寬度更改為0 px，並將圖像src更改為“”！ 我在DIV中也有圖像，並嘗試隱藏DIV，但是再次，什么都沒有？

如果在更改前發出警報： alert(document.getElementById(mouse_over_name).style.display) ，則在“無”后出現空白警報框。

我想念什么？

您可以在此處實時查看以上代碼： http : //www.beaconfasteners.net/beacon_advantage/graph/test.html

編輯：我已經在所有主要的瀏覽器中嘗試過。

Answer 1

羅比·科尼利森（Robby Cornelissen）是正確的。 您的img沒有隱藏的原因是因為onclick使用area元素的ID，並且您正在設置顯示：沒有，而不是img元素。 我不確定是否可以隱藏area元素的內容，但是您可以潛在地使用它來查找和隱藏與單擊區域共享相同id的圖像元素：

function set_spot(mouse_over_name) { 
    [].forEach.call(document.querySelectorAll('img'), function(el) {
       if (el.id === mouse_over_name) {
           el.style.display = 'none';
       };
    });
};

這將遍歷頁面上的所有圖像，因此我無法保證這種解決方案的速度。 您可以在這里預覽：

jsfiddle

Javascript DOM更改無效

問題描述

1 個解決方案

解決方案1
0 2014-10-09 01:52:35

Javascript DOM更改無效

問題描述

1 個解決方案

解決方案1 0 2014-10-09 01:52:35

解決方案1
0 2014-10-09 01:52:35