返回

如何在 HTML 中引入 JS 文件中的变量——从小白到大神

前端

在 HTML 中引入 JS 文件中的变量：动态网页的便捷之门

前言

在前端开发的广阔世界中，JS 和 HTML 相辅相成，共同构建着交互性和动态性的网页体验。其中，将 JS 文件中的变量引入 HTML 扮演着至关重要的角色，使我们能够创建更加灵活、富有生气的网页。对于新手而言，这可能令人困惑，但本文将一步步引导你掌握这项技术，让你的网页如虎添翼。

方式一：使用 <script> 标签

引入 JS 变量的最直接方法是使用 <script> 标签。将这个标签置于 HTML 文件中，指定对应的 JS 文件路径。在 JS 文件中，你可以定义变量并对其赋值，然后在 HTML 文件中通过 document.querySelector() 方法获取该变量的值。

<!-- HTML 文件中引入 JS 文件 -->
<script src="script.js"></script>

<!-- JS 文件中定义变量并赋值 -->
var myVariable = "你好，世界！";

<!-- HTML 文件中获取变量的值 -->
var element = document.querySelector('#my-element');
element.innerHTML = myVariable;

方式二：使用服务

对于非开发人员来说，托管 JS 文件可能有些麻烦。因此，我们可以借助服务来解决这个问题。将服务引入 HTML 文件后，你就可以在服务中定义变量并对其赋值，然后在 HTML 文件中使用 document.querySelector() 方法获取该变量的值。

<!-- HTML 文件中引入服务 -->
<script src="https://unpkg.com/my-library/dist/script.js"></script>

<!-- 服务中定义变量并赋值 -->
var myVariable = "你好，世界！";

<!-- HTML 文件中获取变量的值 -->
var element = document.querySelector('#my-element');
element.innerHTML = myVariable;

访问 JS 中的方法

除了获取变量的值，你还可以访问 JS 中的方法，这些方法是一组用于执行特定任务的指令。通过 document.querySelector() 方法获取 JS 对象，然后使用该对象的 .方法名() 来调用相应的方法。

<!-- HTML 文件中获取 JS 对象 -->
var element = document.querySelector('#my-element');

<!-- HTML 文件中调用 JS 方法 -->
element.myMethod();

结语

恭喜你！现在你已经掌握了在 HTML 中引入 JS 文件中的变量和访问 JS 中的方法。充分利用这些技术，你可以构建出更加强大、动态的网页，让用户体验更上一层楼。如果你有任何疑问，欢迎在评论区留言，我将竭诚为你解答。

常见问题解答

  1. 我可以同时引入多个 JS 文件吗？
    当然可以！在 <script> 标签中指定不同的路径即可。

  2. 使用服务有什么好处？
    服务托管着 JS 文件，无需本地运行，对于非开发人员来说非常方便。

  3. document.querySelector() 方法有何作用？
    它获取指定选择器的第一个匹配元素。

  4. 调用 JS 方法后会发生什么？
    JS 方法将执行其定义的指令，例如更改元素样式或处理用户输入。

  5. 如何调试 JS 变量和方法？
    使用浏览器开发人员工具，可以查看和修改变量的值，以及调试方法的执行。