Question

我是一名编程学生，参加基础网页设计课程。我必须编写一个基本的JavaScript函数，当鼠标悬停在链接上时，它会改变显示的照片。我写的函数完美无缺，我在作业中得到了A.但是我的教授建议，为了额外的功劳，我应该尝试重写我的代码，以便它能够以编程方式与innerHTML＆＃34;使用document.createElement("img")。我不知道如何处理这个问题。我使用createElement查找的所有内容似乎都不符合我编写函数的方式。任何帮助或指导都将被适用。以下是我当前代码的一些片段以供参考。（HTML和JavaScript位于不同的文件中。）

感谢您提出任何建议！

HTML

    <h2 id="main">What&#39;s Nearby</h2>

    <figure id="pix" class="right">

      <img src="images/cablecar.jpg" width="480" height="270" alt="cable car turnaround" id="gallery" />

    </figure>

    <ul>

      <li><a href="http://www.asianart.org/" onmouseover="switchPix('asian', 'Asian Art Museum')" onfocus="switchPix('asian', 'Asian Art Museum')">Asian Art Museum</a></li>

    **etc.** 

    </ul>

  </article>

的JavaScript

function switchPix(file, desc) {

  document.getElementById('pix').innerHTML = '<img src=\"images/' + file + '.jpg\" width = \"480\" height = \"270\" alt=\"' + desc + '\" />';

}

这是我在这里提出的第一个问题，所以如果我的措辞不好或者我没有遵循所有指导方针，我会道歉。随着我对网站和编码的了解越来越多，我会尝试做得更好。

Answer 1

使用document.createElement（），您可以创建另一个图像标记：

// Create the element
var imgElem = document.createElement('img');

// Assign the image path to it's src attribute
imgElem.src = "path\to\image";

// Assign width
imgElem.width = 480px;

// Assign height
imgElem.height = 270px;

// Assign alt
imgElem.alt = "something";

然后你将这个元素添加到＆＃34;父母＆＃34;像这样的数字元素：

document.getElementById('pix').appendChild(imgElem);

然后你必须删除或隐藏现有的图像元素，如下所示：

document.getElementById('pix').getElementsByTagName('img')[0].style.display = 'none';

有更多方法可以达到效果。

只需更改＆＃34; src＆＃34;鼠标悬停时现有图片标记的属性。
将两个图片标记放在图元素中。隐藏一个并一次显示另一个。当鼠标悬停事件发生时，只需更改其style.display属性即可显示一个并隐藏其他图像标记。 ..

Answer 2

createElement 使用javascript DOM API。

这意味着您正在使用具有方法和属性的对象而不是字符串连接。

请注意，您使用 document.createElement 创建的每个HTML元素都应添加到某个位置的当前HTML文档中，以便在页面上显示。

您可以在Mozilla development

上找到参考

createElement vs getElementById

2 个答案: