Latest web development tutorials

JavaScript Tutorial

JavaScript Tutorial JavaScript Introduction JavaScript usage JavaScript Output JavaScript grammar JavaScript Statement JavaScript Notes JavaScript variable JavaScript type of data JavaScript Object JavaScript function JavaScript Scope JavaScript event JavaScript The string JavaScript Operator JavaScript Comparison JavaScript If...Else JavaScript switch JavaScript for JavaScript while JavaScript Break & Continue JavaScript typeof JavaScript Type conversion JavaScript Regular Expressions JavaScript error JavaScript debugging JavaScript Variable promotion JavaScript Strict mode JavaScript Use errors JavaScript Form validation JavaScript Keep the keyword JavaScript JSON JavaScript void JavaScript Code specification

JS function

JavaScript Function definition JavaScript Function parameter JavaScript Function call JavaScript Closure


DOM Introduction DOM HTML DOM CSS DOM event DOM EventListener DOM element

JS Advanced Tutorial

JavaScript Object JavaScript Number JavaScript String JavaScript Date JavaScript Array JavaScript Boolean JavaScript Math JavaScript RegExp Object

JS Browser BOM

JavaScript Window JavaScript Window Screen JavaScript Window Location JavaScript Window History JavaScript Navigator JavaScript Pop-ups JavaScript Timing events JavaScript Cookies

JS Library

JavaScript Library JavaScript test jQuery JavaScript test Prototype

JS Examples

JavaScript Examples JavaScript Object instance JavaScript Browser object instance JavaScript HTML DOM Examples JavaScript to sum up

JS Reference Manual

JavaScript Object HTML DOM Object

JavaScript HTML DOM change CSS

HTML DOM allows JavaScript to change the style of HTML elements.

Change HTML styles

To change the style of an HTML element, use this syntax:


The following example will change the style <p> element:


<! DOCTYPE html> <Html> <Head> <Meta charset = "utf-8"> <Title> This tutorial ( </ title> </ Head> <Body> <P id = "p1"> Hello World ! </ p> <P id = "p2"> Hello World ! </ p> <Script> document.getElementById ( "p2" ) style.color = "blue";. Document.getElementById ( "p2") style.fontFamily = "Arial";.. Document.getElementById ( "p2") style.fontSize = "larger"; </ script> <P> script by modifying the above paragraphs. </ P> </ Body> </ Html>

try it"

Use Event

HTML DOM allows us to execute code by triggering events.

For example, the following events:

  • Element is clicked.
  • The page loads.
  • Input box is modified.
  • ......

In the following sections, you will learn more about the event knowledge.

This example changes the style id = "id1" HTML element, when the user clicks the button:


<! DOCTYPE html>

<H1 id = "id1"> My heading 1 </ h1>
<Button type = "button"
onclick = "document.getElementById ( 'id1'). style.color = 'red'">
Point me! </ Button>

</ Body>
</ Html>

try it"

More examples

How to make an element invisible. Element you want to show or disappear?