如何更改畫布上的ID

我有一個基於畫布上的字符串顯示gif圖標的頁面。例如「晴天」。可以從api獲取該字符串。我的問題是我如何將包含該字符串的變量「圖標」分配給我的畫布的ID。當然，因爲我是初學者，所以有更好的方法來做到這一點。如何更改畫布上的ID

<!DOCTYPE html> 
<html > 
<head> 
    <meta charset="UTF-8"> 
    <title>Animated weather icons</title> 

     <link rel="stylesheet" href="css/style.css"> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 

</head> 

<body> 


<figure class="icons"> 
    <canvas class="weatherIcon" width="64" height="64"></canvas> 
</figure> 

<script src="https://rawgithub.com/darkskyapp/skycons/master/skycons.js"></script> 

    <script> 

    $(document).ready(function weather(){ 
    $.getJSON("https://api.darksky.net/forecast/[key]/59.868098,%2017.678976?lang=sv&callback=?", 
function(json) { 
var weatherJSON = json.currently; 
var icon=weatherJSON.icon; 

    var icons = new Skycons({"color": "white"}); 

icons.set("clear-day", Skycons.CLEAR_DAY); 
icons.set("clear-night", Skycons.CLEAR_NIGHT); 
icons.set("partly-cloudy-day", Skycons.PARTLY_CLOUDY_DAY); 
icons.set("partly-cloudy-night", Skycons.PARTLY_CLOUDY_NIGHT); 
icons.set("cloudy", Skycons.CLOUDY); 
icons.set("rain", Skycons.RAIN); 
icons.set("sleet", Skycons.SLEET); 
icons.set("snow", Skycons.SNOW); 
icons.set("wind", Skycons.WIND); 
icons.set("fog", Skycons.FOG); 

var iconWeather = document.getElementsByClassName("weatherIcon"); 
iconWeather.id = icon; 


icons.play(); 

}); 
}); 

</script> 

</body> 
</html>

來源

2017-04-22 jaikl

你將不得不澄清你想要的。「將包含該字符串的變量」圖標「分配給我的畫布ID」是否要將畫布元素的'id'設置爲對象的屬性'icon.id'？或將'canvas.id'設置爲對象'icon'？（不能這樣做，因爲'id'只能保存字符串）或者其他的東西？ – Blindman67

嘗試：

document.getElementsByTagName("canvas")[0].setAttribute("id", icon);

來源

2017-04-22 16:46:30

爲了達到預期的結果，請使用以下選項

Document.getElementByClassName返回具有所有給定的類名稱的所有子元素的數組狀物體。

更改iconWeather.id =圖標; to iconWeather [0] .setAttribute（「id」，icon）;

來源

2017-04-22 16:54:45

創建codepen網址以供參考 - https://codepen.io/nagasai/pen/ybJPpy –

如何更改畫布上的ID

回答

相關問題