Question

我有以下内联javascript（显示鼠标悬停的版本）我正在使用。我被告知它需要是外部的，所以我创建了一个.js文件并将其链接到头部，删除了标签，但我无法将其作为链接的js文件。我对此非常陌生，我确信这是非常简单的，我不理解，任何帮助都表示赞赏。

<!DOCTYPE html>

<html>
<head>
  <title>template_test</title>
  <link href="styles.css" rel="stylesheet" type="text/css" media="screen">
</head>

<body>
  <div class="section group box">
    <img src="icon-student.png" width="75" height="75">

    <h1>Sub Title for Section</h1>

    <p>Ut molestie mattis ultrices. Suspendisse malesuada turpis non neque tincidunt
    dignissim. Curabitur venenatis vehicula augue, ac venenatis felis aliquam ut.
    Curabitur aliquet turpis nec lorem commodo.</p>
  </div>

  <div id="versionHidden" onmouseover=
  "document.getElementById('hiddenVersion').style.display = 'block';" onmouseout=
  "document.getElementById('hiddenVersion').style.display = 'none';">
    <div id="hiddenVersion" style="display: none;">
      Version 2.0
    </div>
  </div>

  <div id="clear">
    <br>
  </div>
</body>
</html>

Answer 1

已添加到HTML的<head>：

<script src="myJSFile.js"></script>

在外部JavaScript文件中（根据我的例子，“myJSFile.js”）：

window.addEventListener('DOMContentLoaded', function () {
    document.getElementById('versionHidden').addEventListener('mouseover', function () {
       document.getElementById('hiddenVersion').style.display= 'block';
    }, false);

    document.getElementById('versionHidden').addEventListener('mouseout', function () {
      document.getElementById('hiddenVersion').style.display = 'none';
    }, false);
}, false);

这样做的好处是，您不需要内联任何内容，因此可以完全控制Web应用程序中的行为，而无需弄乱文档结构。

当我们将脚本标记放在头部（而不是页面底部）时，我们添加代码来等待DOMContentLoaded事件，因为浏览器呈现时没有“versionHidden”元素脚本标记如果脚本标记位于“versionHidden”元素之前，那么如果我们没有等待document.getElementById('versionHidden')事件，则null将是DOMContentLoaded。

在文档末尾放置一个脚本标记可以避免使用DOMContentLoaded，并且雅虎推荐使用它来提高性能（因为浏览器不会阻止加载并在脚本中呈现其余页面内容正在运行），但1）你可能不希望页面可见，直到加载脚本，和2）一些纯粹主义者（像我自己）认为脚本实际上不是文档的一部分，所以不应该，因为概念而不是实际的原因，放在身体但是在头部。

请注意，上面的代码需要使用现代浏览器才能工作;要支持旧浏览器，请考虑使用jQuery。

但请注意，上面的代码不会非常有用，因为使用display none意味着元素被完全删除，所以鼠标悬停没有任何东西！

你可能想要改用它：

window.addEventListener('DOMContentLoaded', function () {
    document.getElementById('versionHidden').addEventListener('mouseover', function () {
       document.getElementById('hiddenVersion').style.visibility = 'visible';
    }, false);

    document.getElementById('versionHidden').addEventListener('mouseout', function () {
      document.getElementById('hiddenVersion').style.visibility = 'hidden';
    }, false);
}, false);

...并将您的HTML元素更改为：

<div id="hiddenVersion" style="visibility: hidden">

这会保留物品的空间，但只是隐藏它。

Answer 2

将鼠标事件包装在外部.js文件中的函数中......

function mouse(d) {
    document.getElementById('hiddenVersion').style.display = d;
}

然后在你的versionHidden元素上......

<div id="versionHidden" onmouseover="mouse('block');" onmouseout="mouse('none');">

Answer 3

您发布的代码的头部没有JS文件。要正确链接JS文件，请执行以下操作：

<head>
    <script type="text/javascript" src="myscript.js"></script>
</head>

此处有更多信息：http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml

将内联Javascript转换为外部

3 个答案: