DHTML JavaScript

DHTML 的全称是动态超文本标记语言。DHTML 结合 HTML、CSS 和 JavaScript 来创建交互式动态网页。它允许基于用户输入进行自定义和内容更改。之前，HTML 用于创建仅定义内容结构的静态页面。

CSS 有助于增强页面的外观。但是，这些技术在创建交互式体验方面的能力有限。DHTML 引入了 JavaScript 和文档对象模型 (DOM) 来使网页动态化。使用 DHTML，网页可以根据用户操作进行控制和更新，从而无需为每个用户创建单独的静态页面。

我们可以使用 <src> 标签在 HTML 文档中包含外部 JavaScript 文档。此外，我们可以在 <script> 元素内的 HTML 文档中包含 JavaScript。

以下是我们可以使用 JavaScript 执行的一些任务；执行 HTML 任务、执行 CSS 任务、处理事件等。

  • 执行 HTML 任务

  • 执行 CSS 任务

  • 处理事件等

示例

在以下示例中，我们使用 HTML DOM document.getElementById() 方法更改 id = "demo" 元素的文本内容 −

<!DOCTYPE html>
<html>
<body>
   <h1>Welcome to Tutorialspoint</h1>
   <p id = "demo"> Text will be modified</p>
   <script>
      document.getElementById("demo").innerHTML = "Simply Easy Learning at your fingertips...";
   </script> 
</body>
</html>

示例

在下例中，我们创建一个函数，在用户单击按钮时调用此函数，该函数会更改文本的背景色并在屏幕上显示警告。

<!DOCTYPE html>
<html>
   <head>
      <style>
         #demo{
            display: flex;
            margin: auto;
            justify-content: center;
         }
         input{
            display: flex;
            margin: auto;
            justify-content: center;
         }
      </style>
      <h1 id = "demo"> Tutorialspoint </h1>
      <input type = "submit" onclick = "btn()"/>
      <script>
         function btn() {
            document.getElementById("demo").style.backgroundColor = "seagreen";
            window.alert("Background color changed to seagreen");
         }
      </script>
   </head>
</html>


更新时间： 2023 年 8 月 4 日

4K+ 浏览量

开始您的事业

通过完成课程获得认证

开始
广告