DHTML JavaScript-js教程-PHP中文网

DHTML JavaScript

PHPz

发布： 2023-09-21 17:09:04

转载

725人浏览过

dhtml javascript

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

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

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

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

立即学习“Java免费学习笔记（深入）”；

执行 HTML 任务

javascript编写的颜色选择器
javascript编写的颜色选择器，不仅可以从色谱中选取任意的颜色，而且还可以从自定义色块中快速选取常用的颜色。

11

查看详情
执行 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中文网其它相关文章！