从数组中获取图像，并使用javascript将其设置为html中类的背景图像
从数组中获取图像，并使用javascript将其设置为html中类的背景图像
提问于 2018-10-26 02:04:21
我有一个有三个项目的数组 items ，我随机选择了两个项目，其中一个取了它的标签，并将其显示在<p>中的两个框中。
i want the URL of the selected item to be displayed as背景图像 of the corresponding box.，即如果在第一个框中显示1，则其背景图像应为URL为1。
如何实现它？？图像应该可以放在盒子里。
我不得不使用背景图像st方法，但它不起作用。
var array2 = [];
var items = [{
label: '1',
url: 'https://picsum.photos/200/300/?random'
},
{
label: '2',
url: 'https://picsum.photos/200/300/?random'
},
{
label: '3',
url: 'https://picsum.photos/200/300/?random'
}
];
array2 = items.slice();
rvalue();
var item;
function rvalue() {
ptags = document.querySelectorAll('[name="values"]');
boxes = document.getElementsByClassName("box");
for (var index = 0; index < 2; index++) {
var randomIndex = Math.floor(Math.random() * array2.length);
item = array2.splice(randomIndex, 1);
ptags[index].textContent = item[0].label;
//boxes[index]style.backgroundImage = item.url;
ptags[index].dataset.itemIndex = randomIndex;
}
}.box {
width: calc(15.4% - 4px);
display: inline-block;
border-radius: 5px;
border: 2px solid #333;
border: #000 border-color: #e6e600;
margin: -2px;
background-color: #0F6;
}
.box {
height: 15vh;
display: inline-flex;
align-items: center;
justify-content: center
}
#container {
white-space: nowrap;
text-align: center;
border: px solid #CC0000;
margin: 2px;
margin-right: 2px;
}
.box p {
font-size: calc(2vw + 10px);
}
p {
font: "Courier New", Courier, monospace;
font-size: 30px;
color: #005ce6;
text-align: center;
}
.text {
padding: 20px;
margin: 7 px;
margin-top: 10px;
color: white;
font-weight: bold;
text-align: center;
}
body {
background-size: 100vw 100vh;
}<div id="container">
<div class="box" id="10">
<p name="values"></p>
</div>
<div class="box" id="11">
<p name="values"></p>
</div>
</div>
回答 2
Stack Overflow用户
发布于 2018-10-26 02:14:39
您应该使用url(link)而不是link，如下所示：
boxes[index].style.backgroundImage = 'url('+item[0].url+')';
var array2 = [];
var items = [{
label: '1',
url: 'https://picsum.photos/200/300/?random'
},
{
label: '2',
url: 'https://picsum.photos/200/300/?random'
},
{
label: '3',
url: 'https://picsum.photos/200/300/?random'
}
];
array2 = items.slice();
rvalue();
var item;
function rvalue() {
ptags = document.querySelectorAll('[name="values"]');
boxes = document.getElementsByClassName("box");
for (var index = 0; index < 2; index++) {
var randomIndex = Math.floor(Math.random() * array2.length);
item = array2.splice(randomIndex, 1);
ptags[index].textContent = item[0].label;
boxes[index].style.backgroundImage = 'url(' + item[0].url + ')';
ptags[index].dataset.itemIndex = randomIndex;
}
}.box {
width: calc(15.4% - 4px);
border-radius: 5px;
border: 2px solid #e6e600;
margin: -2px;
display: inline-flex;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
#container {
white-space: nowrap;
text-align: center;
border: px solid #CC0000;
margin: 2px;
margin-right: 2px;
}
.box p {
font-size: calc(2vw + 10px);
}
p {
font: "Courier New", Courier, monospace;
font-size: 30px;
color: #005ce6;
text-align: center;
}
.text {
padding: 20px;
margin: 7 px;
margin-top: 10px;
color: white;
font-weight: bold;
text-align: center;
}
body {
background-size: 100vw 100vh;
}<div id="container">
<div class="box" id="10">
<p name="values"></p>
</div>
<div class="box" id="11">
<p name="values"></p>
</div>
</div>
Stack Overflow用户
发布于 2018-10-26 04:02:10
为了使图像适合方框，您可以向box类添加一些css规则，并使用boxes[index].style.backgroundImage = "url("+ item[0].url +")"设置背景图像本身。
var array2 = [];
var items = [{
label: '1',
url: 'https://picsum.photos/200/300/?random'
},
{
label: '2',
url: 'https://picsum.photos/200/300/?random'
},
{
label: '3',
url: 'https://picsum.photos/200/300/?random'
}
];
array2 = items.slice();
rvalue();
var item;
function rvalue() {
ptags = document.querySelectorAll('[name="values"]');
boxes = document.getElementsByClassName("box");
for (var index = 0; index < 2; index++) {
var randomIndex = Math.floor(Math.random() * array2.length);
item = array2.splice(randomIndex, 1);
ptags[index].textContent = item[0].label;
boxes[index].style.backgroundImage = "url("+ item[0].url +")"
ptags[index].dataset.itemIndex = randomIndex;
}
}.box {
width: calc(15.4% - 4px);
height: 15vh;
border-radius: 5px;
border: 2px solid #333;
border: #000 border-color: #e6e600;
display: inline-flex;
align-items: center;
margin: -2px;
background-color: #0F6;
justify-content: center;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
#container {
white-space: nowrap;
text-align: center;
border: px solid #CC0000;
margin: 2px;
margin-right: 2px;
}
.box p {
font-size: calc(2vw + 10px);
}
p {
font: "Courier New", Courier, monospace;
font-size: 30px;
color: #005ce6;
text-align: center;
}<div id="container">
<div class="box" id="10">
<p name="values"></p>
</div>
<div class="box" id="11">
<p name="values"></p>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52995511
复制相关文章
相似问题