js如何与html结合的

2024年4月12日 互联网

通过在HTML文件中插入JavaScript代码或引用外部JavaScript文件，可以实现JavaScript与HTML的结合。

JavaScript与HTML的结合方式

js如何与html结合的

JavaScript和HTML是构建网页的两种核心技术，JavaScript是一种脚本语言，用于为网页添加交互性和动态功能，HTML则是一种标记语言，用于定义网页的结构和内容，通过将JavaScript与HTML结合使用，可以实现更加丰富和交互性的网页效果。

在HTML中引入JavaScript

要在HTML中引入JavaScript代码，可以使用<script>标签，可以将JavaScript代码放在<script>标签之间，或者将其保存为外部文件并通过<script>标签引用。

1、内联JavaScript代码

<html>
  <head>
    <title>JavaScript与HTML结合示例</title>
  </head>
  <body>
    <h1>欢迎来到我的网站！</h1>
    <button onclick="alert('你好！')">点击我</button>
    <!-- JavaScript代码 -->
    <script>
      // JavaScript代码块
      document.write("Hello, World!");
    </script>
  </body>
</html>

在上面的例子中，我们将JavaScript代码直接写在HTML文件中的<script>标签之间，当用户点击按钮时，会弹出一个对话框显示"你好！"，JavaScript代码还将在页面上输出"Hello, World!"。

2、外部JavaScript文件

<html>
  <head>
    <title>JavaScript与HTML结合示例</title>
  </head>
  <body>
    <h1>欢迎来到我的网站！</h1>
    <button onclick="showAlert()">点击我</button>
    <!-- 引入外部JavaScript文件 -->
    <script src="script.js"></script>
  </body>
</html>

在上面的例子中，我们将JavaScript代码保存在一个名为"script.js"的外部文件中，并通过<script src="script.js"></script>标签引用该文件，当用户点击按钮时，会调用外部JavaScript文件中定义的函数"showAlert()"，从而弹出一个对话框显示"你好！"。

JavaScript与HTML元素交互

通过JavaScript可以与HTML元素进行交互，从而实现动态效果和用户操作响应，以下是一些常见的交互操作示例：

1、修改HTML元素内容

<html>
  <head>
    <title>JavaScript与HTML结合示例</title>
  </head>
  <body>
    <h1 id="myHeading">欢迎来到我的网站！</h1>
    <button onclick="changeText()">点击我</button>
    <!-- JavaScript代码 -->
    <script>
      function changeText() {
        var heading = document.getElementById("myHeading");
        heading.innerHTML = "文本已改变！";
      }
    </script>
  </body>
</html>

在上面的例子中，我们通过getElementById()方法获取id为"myHeading"的HTML元素，然后使用innerHTML属性修改其内容为"文本已改变！"，当用户点击按钮时，标题文本将会发生改变。

2、修改HTML元素样式

<html>
  <head>
    <title>JavaScript与HTML结合示例</title>
  </head>
  <body>
    <h1 id="myHeading">欢迎来到我的网站！</h1>
    <button onclick="changeColor()">点击我</button>
    <!-- JavaScript代码 -->
    <script>
      function changeColor() {
        var heading = document.getElementById("myHeading");
        heading.style.color = "red"; // 修改文本颜色为红色
        heading.style.fontSize = "24px"; // 修改字体大小为24像素
      }
    </script>
  </body>
</html>
最新文章