What is DHTML

Mostly web developers don’t know what is DHTML? The very first straight forward definition to know about this term DHTML is changing the style and decoration of HTML tags, elements or form objects using JavaScript functions.

DHTML stands for Dynamic HTML and it is a combined result of HTML and JavaScript. When you call any JavaScript function to change the style of any HTML element it works as a client side scripting code that is immediately registered by the web browser in turn as output result it changes the HTML element style without refreshing the page. DHTML makes the web page more interactive for users. Users can modify the look and feel of page like changing font size, font colour, background colour, images and also docking of whole block anywhere on the page and you never have to call new page to show the changes.

Before using DHTML on your web pages you must be aware of some points that make DHTML a little bit difficult to manage on different browsers to work properly.
Every browser available today has some different document type definitions for HTML elements. Document type definition manages all the styles and display properties of these HTML elements. That is why you must know about these little differences between browsers to run DHTML JavaScript to work successfully.

Following are some tips to Detect DHTML and JavaScript capable browser properties:

1. Detect browser type.
2. Detect JavaScript is enabled or not.
3. Detect Layer element for Netscape Navigator.
4. Detect Div element for other browsers.
5. Detect browser versions for using cross browser capabilities of HTML elements.

A simple code snippet of DHTML JavaScript:

<script>
   document.write(“This text is written by DHTML JavaScript.”);
</script>

It will display a text message on the page. But it will display inline text message on page load. You can also try on demand message display by creating a simple function and call to on button click event.

A simple code example:

<script>
<![CDATA[
    function call_me() {
        document.write('This text is written by DHTML JavaScript.');
    }
]]>
</script>

<input type="button" 
        id="btn1" 
        onclick="call_me();" 
        value="Click me">

Now you have learnt the power of DHTML to change the output without refreshing the page even after the document has loaded.

Continue to next tutorial: Javascript Checkbox Visible True/False to learn how to show/hide the HTML elements dynamically.