[英]How to change id on canvas
我有一個頁面,該頁面基於畫布上的字符串顯示gif圖標。 例如“晴天”。 可以從api獲取該字符串。 我的問題是我如何將包含該字符串的變量“ icon”分配給畫布的ID。 當然,作為i'ma初學者,有更好的方法可以做到這一點。
<!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>
嘗試:
document.getElementsByTagName("canvas")[0].setAttribute("id", icon);
為了達到預期的效果,請使用以下選項
Document.getElementByClassName返回具有所有給定類名稱的所有子元素的類似數組的對象。
更改iconWeather.id =圖標; 到iconWeather [0] .setAttribute(“ id”,icon);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.