📜  javascript 附加到段落 - Javascript (1)

📅  最后修改于: 2023-12-03 15:16:16.473000             🧑  作者: Mango

JavaScript 附加到段落 - JavaScript

JavaScript 是一种脚本语言,广泛运用于 Web 开发、桌面应用程序、移动应用程序等领域。在 Web 开发中,JavaScript 是一种用于给网页增加交互性和动态效果的脚本语言。本文将为你介绍如何将 JavaScript 附加到段落中,实现丰富的网页交互效果。

HTML 中添加 JavaScript

在 HTML 中添加 JavaScript 的方式有三种:内部脚本、外部脚本文件和行内脚本。

内部脚本

内部脚本是在 HTML 文档中嵌入 JavaScript 代码。在 <head> 或 <body> 标签中添加 <script> 标签,将 JavaScript 代码写在 <script> 和 </script> 标签之间即可。例如:

<!DOCTYPE html>
<html>
  <head> 
    <title>JavaScript 附加到段落</title>
    <script>
      function changeColor() {
        document.getElementById("p1").style.color = "red";
      }
    </script>
  </head>
  <body>

    <button onclick="changeColor()">改变颜色</button>
    <p id="p1">这是一个段落。</p>

  </body>
</html>

在上面的例子中,我为页面添加了一个按钮,当用户点击按钮时,将调用 changeColor() 函数,将 p1 元素的颜色设置为红色。

外部脚本文件

外部脚本文件是将 JavaScript 代码写在一个单独的文件中,并在 HTML 文档中通过 <script> 标签引用该文件。例如:

<!DOCTYPE html>
<html>
  <head> 
    <title>JavaScript 附加到段落</title>
    <script src="script.js"></script>
  </head>
  <body>

    <button onclick="changeColor()">改变颜色</button>
    <p id="p1">这是一个段落。</p>

  </body>
</html>

在上面的例子中,我将 JavaScript 代码写在一个名为 script.js 的文件中,然后在 HTML 文档中引用该文件。

行内脚本

行内脚本是直接将 JavaScript 代码写在 HTML 元素的事件属性中,例如:

<!DOCTYPE html>
<html>
  <head> 
    <title>JavaScript 附加到段落</title>
  </head>
  <body>

    <button onclick="document.getElementById('p1').style.color='red'">改变颜色</button>
    <p id="p1">这是一个段落。</p>

  </body>
</html>

在上面的例子中,我将 JavaScript 代码直接写在按钮的 onclick 事件属性中,当用户点击按钮时,将直接修改 p1 元素的颜色为红色。

调用函数

在 HTML 中添加 JavaScript 代码后,我们可以为 HTML 元素添加事件属性,调用 JavaScript 函数实现丰富的交互效果。例如:

<!DOCTYPE html>
<html>
  <head> 
    <title>JavaScript 附加到段落</title>
    <script>
      function changeColor() {
        document.getElementById("p1").style.color = "red";
      }
    </script>
  </head>
  <body>

    <button onclick="changeColor()">改变颜色</button>
    <p id="p1">这是一个段落。</p>

  </body>
</html>

在上面的例子中,我为按钮添加了 onclick 事件属性,当用户点击按钮时将调用 changeColor() 函数,将 p1 元素的颜色设置为红色。

Markdown 格式
# JavaScript 附加到段落 - JavaScript

JavaScript 是一种脚本语言,广泛运用于 Web 开发、桌面应用程序、移动应用程序等领域。在 Web 开发中,JavaScript 是一种用于给网页增加交互性和动态效果的脚本语言。本文将为你介绍如何将 JavaScript 附加到段落中,实现丰富的网页交互效果。

## HTML 中添加 JavaScript

在 HTML 中添加 JavaScript 的方式有三种:内部脚本、外部脚本文件和行内脚本。

### 内部脚本

内部脚本是在 HTML 文档中嵌入 JavaScript 代码。在 <head> 或 <body> 标签中添加 <script> 标签,将 JavaScript 代码写在 <script> 和 </script> 标签之间即可。例如:

```html
<script>
  function changeColor() {
    document.getElementById("p1").style.color = "red";
  }
</script>
外部脚本文件

外部脚本文件是将 JavaScript 代码写在一个单独的文件中,并在 HTML 文档中通过