DHTML JavaScript

PHPz轉載: 2023-09-21 17:09:04607瀏覽

DHTML JavaScript

DHTML 代表動態超文本標記語言。 DHTML 結合了 HTML、CSS 和 JavaScript 來建立互動式動態網頁。它允許根據用戶輸入自訂和更改內容。早些時候，HTML 用於建立僅定義內容結構的靜態頁面。

CSS 有助於增強頁面的外觀。然而，這些技術創造互動體驗的能力有限。 DHTML 引入了 JavaScript 和文件物件模型 (DOM) 來使網頁變得動態。使用 DHTML，可以根據使用者操作來操作和更新網頁，從而無需為每個使用者建立單獨的靜態頁面。

我們可以使用 cbce1a3cf2f839037583dce8e845670b 標籤將外部 JavaScript 文件包含在 HTML 文件中。另外，我們可以在 3f1c4e4b6b16bbbd69b2ee476dc4f83a 元素內的 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中文網其他相關文章！

JavaScript css html 对象事件 dom

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：JavaScript 必須了解的重要特性下一篇：JavaScript 必須了解的重要特性

看更多