캔버스에서 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

원하는 것을 명확히해야합니다. 그 문자열을 포함하는 변수 "icon"을 내 캔버스의 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 = icon; iconWeather [0] .setAttribute ("id", icon);

출처

2017-04-22 16:54:45

참조 용으로 생성 된 코드 URL - https://codepen.io/nagasai/pen/ybJPpy –

캔버스에서 ID를 변경하는 방법

답변

관련 문제