DHTML JavaScript

PHPz 转载: 2023-09-21 17:09:04 241浏览

DHTML JavaScript

DHTML 代表动态超文本标记语言。 DHTML 结合了 HTML、CSS 和 JavaScript 来创建交互式动态网页。它允许根据用户输入定制和更改内容。早些时候，HTML 用于创建仅定义内容结构的静态页面。

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

我们可以使用 <src> 标签将外部 JavaScript 文档包含在 HTML 文档中。另外，我们可以在 <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>

以上就是DHTML JavaScript的详细内容，更多请关注php中文网其它相关文章！

PHP课程 HTML视频教程 CSS视频 JS视频教程 Vue视频教程

声明：本文转载于：tutorialspoint，如有侵犯，请联系admin@php.cn删除

上一条：JavaScript 必须了解的重要特性下一条：在JavaScript中找到矩阵中最长的连续1的行