JavaScript Tutorial
JS - Introduction JS - Basic JS - Placement JS - Output JS - Statements JS - Syntax JS - Variables JS - Comments JS - Data Types JS - Operators JS - Operator Precedence JS - Condition JS - Switch JS - Functions JS - Objects JS - Loops For JS - Loops While JS - Break JS - Strings JS - String Methods JS - Numbers JS - Number Methods JS - Arrays JS - Array Methods JS - Array Iteration JS - Events JS - Event Listener JS - Event Propagation JS - Date JS - Math JS - Random JS - Boolean JS - Type Conversion JS - RegExp JS - Exception JS - Scope JS - Debugging JS - Hoisting JS - Strict Mode JS - this Keyword JS - Mistakes JS - Best Practices JS - Performance JS - Form Validation JS - ES6 Features
JS Objects
Object Definitions Object Properties Object Methods Object Constructors Object Prototypes
JS Functions
Function Definitions Function Parameters Function Call Function Apply Function Closures
JS HTML DOM
DOM Introduction DOM Methods DOM Selectors DOM HTML DOM CSS DOM Attributes DOM Navigation
JS Browser BOM
JS - Window JS - Screen JS - Location JS - History JS - Navigator JS - Popup Alert JS - Timing JS - Cookies
JS AJAX
AJAX - Introduction AJAX - XMLHttp AJAX - Request AJAX - Response AJAX - PHP
JS JSON
JSON - Introduction JSON - Syntax JSON - Data Types JSON - Parse JSON - Stringify JSON - Objects JSON - Arrays JSON - PHP JSON - JSONP
JS References
JavaScript Reference JavaScript Methods HTML DOM Reference

JavaScript HTML DOM - Changing CSS

The HTML DOM allows JavaScript to get and change the style (CSS) of HTML elements.


Changing Element Style

You can apply styles to the specific HTML element using the style property.

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

element.style.property = value

The following example changes the style of a <h1> element:

Run code

This example changes the style of a <h1> element, when the user clicks a button:

Run code

This example also changes the style of a <h1> element, when the user clicks a button:

Run code

Getting Style Information from Elements

Similarly, you get the styles applied on the HTML elements using the style property.

The following example will get the style information (border-top) from the element having id="demo":

Run code

Note: The style property isn't very useful when it comes to getting style information from the elements, because it only returns the style rules set in the element's style attribute not those that come from elsewhere, such as style rules in the embedded style sheets, or external style sheets.

To get the values of all CSS properties that are actually used to render an element you can use the window.getComputedStyle() method:

Run code

Adding CSS Classes to Elements

You can also get or set CSS classes to the HTML elements using the className property.

Run code

You can also use the classList property to get, set or remove CSS classes easily from an element.

The following example adds a para class to a <p> element:

Run code

Add multiple classes to a <p> element:

Run code

Remove a class from a <p> element:

Run code

Toggle between two classes for a <p> element:

Run code

Toggle a class ("open") to create a side navigation button: