gpt4 book ai didi

javascript - 使用从 JSON 数据中提取的 URL 在 HTML 中设置背景图像

转载 作者:行者123 更新时间:2023-12-02 21:39:11 25 4
gpt4 key购买 nike

var ourRequest = new XMLHttpRequest();
ourRequest.open('GET', 'https://spreadsheets.google.com/feeds/cells/1PzTMW6xH5cjLgvLn_LOq25XEbmrCw2MP9C9vvt4rhoM/1/public/full?alt=json')
ourRequest.onload = function() {
var ourData = JSON.parse(ourRequest.responseText);
var TEXT = ourData.feed.entry[2].gs$cell.inputValue;
var IMG = ourData.feed.entry[3].gs$cell.inputValue;


console.log(TEXT);
console.log(IMG);

document.getElementById('testoutput').innerHTML = TEXT;
document.getElementById('backgroundIMG').style.backgroundImage = "url('IMG')";


};
ourRequest.send();
html, body {
height: 100%;
margin: 0;
overflow: hidden; /* Hide scrollbars */
}

div {
text-align: left;
min-height: 100%;
font-family: motiva-sans, sans-serif;
font-weight: 800;
font-size: 15vw;
padding: 15px;
padding-top: 30px;
padding-left: 10%;
}
<html lang="en">
<head>
<link rel="stylesheet" href="https://use.typekit.net/vbl6jef.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
<meta charset="utf-8">
<title>Google Sheets - Werkend</title>
</head>
<body>
<div id="backgroundIMG"><div>
<div id="testoutput"></div>
</body>
</html>

我正在处理一个 HTML 文档,该文档从 Google Sheets JSON 数据获取其样式。到目前为止,它适用于设置背景颜色等属性。

现在我正在尝试设置backgroundImage并设置一个包含url的变量:document.getElementById('backgroundIMG').style.backgroundImage = "url('IMG')";

当我 console.log 变量时,它会很好地返回 url。当我将 URL 直接放入上面的代码中时,它就可以工作。当我将变量放入代码中时(如上所示),它不会加载 URL。

我有限的知识使我无法搜索有关这里发生的事情的正确术语。我尝试过阅读变量,但尚未成功。

任何人都可以通过告诉我要阅读的内容或根据下面的代码提供解决方案来指出正确的方向吗?

最佳答案

它不使用 IMG 变量,只是将 IMG 作为字符串,所以请尝试:

document.getElementById('backgroundIMG').style.backgroundImage = "url(" + IMG + ")";

向字符串添加变量:

“传统”方式(加号是扩展字符串):

let s = "number: " + num;

let s = 'number: ' + num;

ES6 模板文字:

let s = `number: ${num}`

通过这些链接获取更多信息:

JS Strings

Template literals

关于javascript - 使用从 JSON 数据中提取的 URL 在 HTML 中设置背景图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60409606/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com