자바 스크립트로 이미지 소스 경로를 변경하는 데 문제가 있습니다. 로드 할 때마다 페이지 색상을 변경하는 아이디어가 있습니다. 그래서 5 가지 색상 유형의 svg를 생성하여 파란색, 빨간색, 노란색으로 폴더에 넣었습니다. 이미지 태그에서 정상적으로 시도한 것처럼 경로가 옳다는 것을 알고 있습니다. jquery도 사용해 보았지만 다시 실패했습니다. 여러분 중 누구라도 내 실수를 찾을 수 있다면 매우 감사 할 것입니다.
//------------------------------------RANDOM-BACKGROUND--------------------------------------------
var blue = "#43D5FA";
var darker_blue = "#2f95af";
var red = "#FF5757";
var darker_red = "#b33d3d";
var yellow = "#FFFF47";
var darker_yellow = "#e1e142";
var purple = "#8555E4";
var darker_purple = "#734bc2";
var turqoise = "#50FFB1";
var darker_turqoise = "#47db98";
var black = "#000000";
//svgs
var undraw_svg_vytvoreni_marketingu = document.getElementById("undraw-svg-vytvoreni-marketingu");
//random output
var random = Math.floor(Math.random() * 5);
console.log(random);
//cycle integer
var i;
switch(random)
{
//purple
case 0:
document.body.style.background = purple;
undraw_svg_vytvoreni_marketingu.src = "/assets/img/undraw-svg/red/vytvoreni-marketingu.svg";
break;
//turqoise
case 1:
document.body.style.background = turqoise;
undraw_svg_vytvoreni_marketingu.src = "assets/img/undraw-svg/purple/vytvoreni-marketingu.svg";
break;
//blue
case 2:
document.body.style.background = blue;
undraw_svg_vytvoreni_marketingu.src = "assets/img/undraw-svg/purple/vytvoreni-marketingu.svg";
break;
//yellow
case 3:
document.body.style.background = yellow;
undraw_svg_vytvoreni_marketingu.src = "assets/img/undraw-svg/red/vytvoreni-marketingu.svg";
break;
//red
case 4:
document.body.style.background = red;
undraw_svg_vytvoreni_marketingu.src = "assets/img/undraw-svg/blue/vytvoreni-marketingu.svg";
break;
}
function info_button_color(color) {
info_button.style.color = color;
}<!DOCTYPE html>
<html lang="cs" translate="no">
<head>
<meta charset="utf-8">
<meta name="google" content="notranslate">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="dist/bundle.css">
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="assets/img/favicon.png" type="image/x-icon">
</head>
<body>
<section id="welcome" class="welcome container-fluid">
<div class="row h-100">
<div class="col-sm-6 d-flex align-items-center justify-content-center">
<div class="welcome-img">
<img id="undraw-svg undraw-svg-vytvoreni-marketingu" src="//:0" >
</div>
</div>
</div>
<span class="material-icons">expand_more</span>
</section>
</body>
</html>당신은 변경하면 id당신을의를 img유효로 id하고 또한 당신을 변경하는 getElementById()것과 id그것을 작동합니다.
당신은 :
document.getElementById("undraw-svg-vytvoreni-marketingu")
동안 :
<img id="undraw-svg undraw-svg-vytvoreni-marketingu" src="//:0" >
//------------------------------------RANDOM-BACKGROUND--------------------------------------------
var blue = "#43D5FA";
var darker_blue = "#2f95af";
var red = "#FF5757";
var darker_red = "#b33d3d";
var yellow = "#FFFF47";
var darker_yellow = "#e1e142";
var purple = "#8555E4";
var darker_purple = "#734bc2";
var turqoise = "#50FFB1";
var darker_turqoise = "#47db98";
var black = "#000000";
//svgs
var undraw_svg_vytvoreni_marketingu = document.getElementById("blubb");
//random output
var random = Math.floor(Math.random() * 5);
console.log(random);
//cycle integer
var i;
switch(random)
{
//purple
case 0:
document.body.style.background = purple;
undraw_svg_vytvoreni_marketingu.src = "https://image.flaticon.com/icons/svg/1643/1643587.svg";
break;
//turqoise
case 1:
document.body.style.background = turqoise;
undraw_svg_vytvoreni_marketingu.src = "https://image.flaticon.com/icons/svg/1643/1643586.svg";
break;
//blue
case 2:
document.body.style.background = blue;
undraw_svg_vytvoreni_marketingu.src = "https://image.flaticon.com/icons/svg/1643/1643583.svg";
break;
//yellow
case 3:
document.body.style.background = yellow;
undraw_svg_vytvoreni_marketingu.src = "https://image.flaticon.com/icons/svg/1643/1643582.svg";
break;
//red
case 4:
document.body.style.background = red;
undraw_svg_vytvoreni_marketingu.src = "https://image.flaticon.com/icons/svg/1643/1643581.svg";
break;
}
function info_button_color(color) {
info_button.style.color = color;
}<!DOCTYPE html>
<html lang="cs" translate="no">
<head>
<meta charset="utf-8">
<meta name="google" content="notranslate">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="dist/bundle.css">
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="assets/img/favicon.png" type="image/x-icon">
</head>
<body>
<section id="welcome" class="welcome container-fluid">
<div class="row h-100">
<div class="col-sm-6 d-flex align-items-center justify-content-center">
<div class="welcome-img">
<img id="blubb" src="//:0" >
</div>
</div>
</div>
<span class="material-icons">expand_more</span>
</section>
</body>
</html>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다