Question

当我点击IMG时，我想将此图像设置为div的背景，我尝试了下面的代码，但它没有用，有人可以帮助我吗？

HTML：

<div id="conteudo">
</div>

JavaScript的：

function clickImagem2(){
   document.getElementById('conteudo').style.background="url('images/JO1.jpg') no-
repeat";
}

Answer 1

请参阅此link

添加点击事件和点击事件集样式。

我添加片段请看。

<html>
<head>
  <title>getElementById example</title>
</head>
  <script>
  function changeImage(src) {  
  var elem = document.getElementById('para');   
  elem.style.backgroundImage = "url("+src+")"; 
  }
  </script>
<body>
  <div id="para" style="height:100px">Some text here</div>
  <button onclick="changeImage('http://placehold.it/100x100');">clickme</button>
</body>
</html>

Answer 2

你必须使用“onclick”方法来调用clickImagem2（）函数。

请参阅以下示例以获取指导

function myFunction(){
document.getElementById("btn").innerHTML = "Hello World";
}

<button id="btn" onclick="myFunction()">Click me</button>

Answer 3

您错过了该功能的调用。将 onclick 添加到您的div可以调用您的函数。

看到这个工作小提琴：

function clickImagem2(){
   document.getElementById('conteudo').style.background="url('http://placehold.it/100x100') no-repeat";
}

#conteudo{
  width:100px;
  height:100px;
  background:yellow;
}

<div id="conteudo" onclick="clickImagem2()">
</div>

Answer 4

单击图像时，事件包含单击的元素。在这里，您可以获得src并将其用作div的背景图片。

＆＃13;

const
  background = document.getElementById('background');
  
function onClickHandler(event) {
  if (!event.target.classList.contains('preview')) {
    return;
  }

  background.style.backgroundImage = `url(${event.target.src})`;
}

document.body.addEventListener('click', onClickHandler);

＆＃13;

.background {
  background-size: cover;
  background-repeat: no-repeat;
  height: 100vh;
  opacity: .2;
  position: fixed;
  width: 100vw;
}
.previews {
  display: flex;
  justify-content: center;
  margin: 1em 0;
  position: relative;
  z-index: 1;
}

.preview {
  border: 1px solid #fff;
  height: 100px;
  width: 160px;
}

.preview + .preview {
  margin-left: 1em;
}

＆＃13;

<div id="background" class="background"></div>
<div class="previews">
  <img class="preview" src="//lorempixel.com/320/200/cats/1"/>
  <img class="preview" src="//lorempixel.com/320/200/cats/2"/>
  <img class="preview" src="//lorempixel.com/320/200/cats/3"/>
</div>

＆＃13;

Answer 5

这里的onClick事件我们传递点击图像的src属性，然后在该函数中设置为背景图像。

＆＃13;

function clickImagem2(src){
   document.getElementById('conteudo').style.background="url('"+src+"') no-repeat";
}

clickImagem2();

＆＃13;

<img onClick="clickImagem2(this.src)" width="50" height="50" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSUb9_jxtyBNrEPTWHDDq9FMbEiRaCot2uesclTBSs9e0sgdjCUzAsYF7Y">

<img onClick="clickImagem2(this.src)" width="50" height="50" src="http://imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg">

<div style="width:120px;height:120px" id="conteudo">
Clicke image will display here
</div>

＆＃13;

Answer 6

您必须使用bind方法click addEventListener个document.getElementById('myImage').addEventListener('click',clickImagem2,false); function clickImagem2(){ let image=document.getElementById('myImage'); document.getElementById('conteudo').style.backgroundImage="url('"+image.src+"')"; }事件处理程序。

img{
  width:200px;
  height:150px;
}
div{
   height: auto;
   left: 0;
   margin: 0;
   min-height: 100%;
   min-width: 674px;
   padding: 0;
   position: fixed;
   top: 0;
   width: 100%;
   z-index: -1;
}

<img src="https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb" id="myImage">
<div id="conteudo">
</div>

this.setExtendedState(JFrame.MAXIMIZED_BOTH);

当我点击图像时，将此图像放在DIV的背景中

6 个答案: