Question

尝试JS

function preview(element) {
  var x = document.getElementById("photos").getElementsByTagName("LI");
  var nodes = document.getElementById(element).childNodes;

  for (i=0; i<x.length; i++){
        x[i].style.width = "10vw";
        x[i].style.height = "10vw";
  }

  document.getElementById('previewBox').style.background = nodes[0];
  viewClose();
}

HTML

<ul id = "photos">
    <li onclick="preview('pic1')" id = "pic1">
        <img src = "https://38.media.tumblr.com/d88beaf3fe2964af04e8b3d57aa32e97/tumblr_n9gnc0n0Gu1tgkx81o1_1280.jpg">
    </li>
</ul>

CSS

#photos li {
  width: 100%;
  display: inline-block;
}

#photos li{
  float: left;
  width: 18vw;
  height: 18vw;
  margin: 1.03vw;
  overflow: hidden;
  background: black;
}

#photos li > img{
  position: relative;
  bottom: 10px;
  /*-webkit-background-size: cover center center; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover center center;*/
  width: 140%;
}

#previewBox{
  width: 90vw;
  height: 50vw;
}

我想要什么：

从img获取li，并将其设为#previewBox的背景。似乎没有什么工作真的有效，而且我尝试了很多。（我知道节点必须有一个循环或子编号）。还有其他方法吗？我学过HTML，CSS，Javascript语言，没有jquery。

Answer 1

使用.children代替childNodes来跳过文本节点，否则您将无法获得img之后的文本节点。

如其他地方所述，您需要img的源，而不是元素本身。你需要将其包含在url('')：

中

function preview(element) {
  var x = document.getElementById("photos").getElementsByTagName("LI");
  var nodes = document.getElementById(element).children;

  for (i=0; i<x.length; i++) {
    x[i].style.width = "10vw";
    x[i].style.height = "10vw";
  }

  document.getElementById('previewBox').style.backgroundImage = "url('" + nodes[0].src + "')";

  viewClose();
}

示例：http://codepen.io/paulroub/pen/lokFh

使用<img/>图像作为另一个元素的背景

1 个答案: