JavaScript Basic Tutorial

JavaScript Objects

JavaScript Functions

JS HTML DOM

JS Browser BOM

AJAX Basic Tutorial

JavaScript Reference Manual

JS DOM Change Element Attributes JS DOM Change HTML Content

JS DOM Change CSS

HTML DOM allows JavaScript to retrieve and modify the styles (CSS) of HTML elements.

to change the style of an element

You can usestyleProperties will apply styles to specific HTML elements.

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

element.style.property　=　value

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

Example

<!DOCTYPE　html>
<html>
<h1　id="demo">HTML　DOM　style　Property</h1>
<script>
document.getElementById("demo").style.color　=　"blue";
</script>
</html>

Test and See‹/›

This example changes<h1>The style of the element:

Example

<h1　id="demo">HTML　DOM　style　Property</h1>
<button　onclick="myFunc()">Click</button>
<script>
function　myFunc()　{
　　　document.getElementById("demo").style.color　=　"blue";
}
</script>

Test and See‹/›

This example also changes the<h1>The style of the element:

Example

<h1　id="demo">HTML　DOM　style　Property</h1>
<button　onclick="document.getElementById('demo').style.color　=　'blue';">Click</button>

Test and See‹/›

to obtain style information from an element

Similarly, you can usestyleProperties will apply styles to HTML elements.

The following example applies styles to an HTML element withid="demo"to obtain style information for the element (border-top）：

Example

var　x　=　document.getElementById("demo").style.borderTop;

Test and See‹/›

Note:When obtaining style information from an elementstyleThe style information property is not very useful when used for style information, because it only returns the style rules set in the element's style attribute, and does not return style rules from other locations, such as style rules from embedded style sheets, or external style sheets.

To obtain the values of all CSS properties actually used to render an element, you can use the followingwindow.getComputedStyle()Method:

Example

let　para　=　document.querySelector('p');
let　compStyles　=　window.getComputedStyle(para);
para.innerHTML　=　'font-size:　'　+　compStyles.getPropertyValue('font-size');
para.innerHTML　+='<br>line-height:　'　+　compStyles.getPropertyValue('line-height');
para.innerHTML　+='<br>padding:　'　+　compStyles.getPropertyValue('padding');

Test and See‹/›

to add a CSS class to an element

You can also useclassNameproperty to get or set the CSS class of an HTML element.

Example

document.getElementById("x").className = "para";

Test and See‹/›

You can also use theclassListeasily get, set, or remove CSS classes from an element.

The following example shows how to<p>Add aparaClass:

Example

var elem = document.getElementById("x");
elem.classList.add("para");

Test and See‹/›

Add multiple classes to<p>Element:

Example

var elem = document.getElementById("x");
elem.classList.add("para", "shadow");

Test and See‹/›

From<p>Remove a class from an element:

Example

var elem = document.getElementById("x");
elem.classList.remove("para");

Test and See‹/›

Toggle between two classes<p>Element:

Example

var elem = document.getElementById("x");
elem.classList.toggle("anotherClass");

Test and See‹/›

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

Run Code

JS DOM Change Element Attributes JS DOM Change HTML Content