Home > Article > Web Front-end > DHTML JavaScript

DHTML JavaScript

PHPzforward: 2023-09-21 17:09:04584browse

DHTML JavaScript

DHTML stands for Dynamic Hypertext Markup Language. DHTML combines HTML, CSS, and JavaScript to create interactive, dynamic web pages. It allows content to be customized and changed based on user input. Earlier, HTML was used to create static pages that only defined the structure of the content.

CSS helps enhance the appearance of your page. However, these technologies are limited in their ability to create interactive experiences. DHTML introduces JavaScript and the Document Object Model (DOM) to make web pages dynamic. Using DHTML, web pages can be manipulated and updated based on user actions, eliminating the need to create separate static pages for each user.

We can include external JavaScript documents in HTML documents using the cbce1a3cf2f839037583dce8e845670b tag. Additionally, we can include JavaScript in the HTML document within the 3f1c4e4b6b16bbbd69b2ee476dc4f83a element.

Here are some of the tasks we can perform using JavaScript; perform HTML tasks, perform CSS tasks, handle events, etc.

Perform HTML tasks
Perform CSS tasks
Handling events, etc.

Example

In the following example, we use the HTML DOM document.getElementById() method to change the text of the id = "demo" element -

<!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>

Example

In the example below, we have created a function that is called if a button is clicked, which changes the background color of the text and displays an alert on the screen.

<!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>

The above is the detailed content of DHTML JavaScript. For more information, please follow other related articles on the PHP Chinese website!

JavaScript css html 对象事件 dom

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：Important features of JavaScript that you must knowNext article：Important features of JavaScript that you must know

See more

DHTML JavaScript

Example

Example

Related articles