Question

我可以使用javascript在页面上拍摄隐藏的图像，将其定义为变量，然后将其放在页面的其他位置吗？

到目前为止，我认为我可能会这样做：

HTML：

<div id="images" class="images hidden">
  <img src="http://lorempixel.com/200/200/cats/" style="">
</div>


<div onclick="createImgHtml">
  <button>Click to show image</button>
</div>

JAVASCRIPT：

var images = document.getElementById('images');

function createImgHtml() {
  return '<div>' + images + '</div>';
}

显然，这不会起作用，因为我不知道如何为包含图像的<div>编写HTML。我如何更改我的功能，以便它实际使用变量创建HTML代码并将其放在页面上？

Answer 1

这取决于您存储/使用图像的方式。

相同范围。

您已将dom保存在变量中，为什么要创建html ??

其他

首先对dom对象进行字符串化，然后在任何地方保存。

下面是相同运行时范围的代码，只需根据需要克隆dom，将其附加到文档中。

＆＃13;

var images = document.getElementById('images')
images2 = images.cloneNode()
images2.className = "images"
var img = document.getElementsByTagName('img')[0]
var body = document.getElementsByTagName('body')[0]

function createImgHtml() {
  body.appendChild(images2.cloneNode().appendChild(img.cloneNode()))
  // return '<div>' + images + '</div>';
}

＆＃13;

.hidden {
  display: none;
}

＆＃13;

<div id="images" class="images hidden">
  <img src="http://fakeimg.pl/350x200/?text=Hello" style="">
</div>


<div>
  <button onclick="createImgHtml()">Click to show image</button>
</div>

＆＃13;

Answer 2

将ID添加到setPrize = (amt) => { this.setState( prevState => ({ userPrize: prevState.userPrize + amt }) ); } render() { switch(this.state.userPrize) { case 1: return <Prizes userPrize={this.state.userPrize} nextPrize={ this.setPrize.bind(this, 1) } previousPrize={ this.setPrize.bind(this, -1) } /> case 2: return <Prizes userPrize={this.state.userPrize} nextPrize={ this.setPrize.bind(this, 1) } previousPrize={ this.setPrize.bind(this, -1) } /> case 3: return <Prizes userPrize={this.state.userPrize} nextPrize={ this.setPrize.bind(this, 1) } previousPrize={ this.setPrize.bind(this, -1) } /> case 4: return <Prizes userPrize={this.state.userPrize} nextPrize={ this.setPrize.bind(this, 1) } previousPrize={ this.setPrize.bind(this, -1) } /> case 5: return <Prizes userPrize={this.state.userPrize} nextPrize={ this.setPrize.bind(this, 1) } previousPrize={ this.setPrize.bind(this, -1) } /> default: throw new Error("Unknown prize state"); } }。

<强> HTML

img

<强> JS

<img src="http://example.com/blah.jpg" id="images" />

链接：

Element.getAttribute()

Document.querySelector()

Template Literals

Answer 3

不确定我是否完全了解你，但这里可能有一些可能有帮助的答案

您可以为要隐藏的所有图像添加一个类，而不是使用javascript通过类名获取它并循环遍历它。
为什么不使用localstorage来存储图像数组

你可以遍历它甚至拥有对象

您可以使用javasript在屏幕上打印，在此处阅读更多相关内容。

HTML DOM appendChild() Method

Answer 4

如果我理解正确，您不需要移动图片，而是显示它（将其取消隐藏）。

通过从包含hidden中移除课程div可以轻松完成此操作：

<强> HTML：

<div id="images" class="images hidden">
  <img src="http://lorempixel.com/200/200/cats/" style="">
</div>


<div>
  <button onclick="showImage">Click to show image</button>
</div>

<强> JAVASCRIPT：

function showImage() {
  var images = document.getElementById('images');
  images.className = images.className.replace('hidden',' ');
}

P.S。：我将onclick属性移至button而不是div。

＆＃13;

function showImage() {
  var images = document.getElementById('images');
  images.className = images.className.replace('hidden',' ');
}

＆＃13;

.hidden {
  dispaly: none;
}

＆＃13;

<div id="images" class="images hidden">
  <img src="http://lorempixel.com/200/200/cats/" style="">
</div>
<div>
  <button onclick="showImage">Click to show image</button>
</div>

＆＃13;

Javascript：将图像复制到变量中以放置在某个位置？

4 个答案: