GeezerVison

The World Wide Web, restored to 800 pixels of glory.

GeezerVison is showing www.tutorialrepublic.com — JavaScript Styling DOM Elements - Tutorial Republic

HOME HTML5 CSS3 JAVASCRIPT JQUERY BOOTSTRAP5 v4.6 PHP7 SQL REFERENCES EXAMPLES FAQ SNIPPETS Online HTML Editor

JAVASCRIPT BASIC

JS Introduction JS Getting Started JS Syntax JS Variables JS Generating Output JS Data Types JS Operators JS Events JS Strings JS Numbers JS If…Else JS Switch…Case JS Arrays JS Sorting Arrays JS Loops JS Functions JS Objects

JAVASCRIPT & DOM

JS DOM Nodes JS DOM Selectors JS DOM Styling JS DOM Get Set Attributes JS DOM Manipulation JS DOM Navigation

JAVASCRIPT & BOM

JS Window JS Screen JS Location JS History JS Navigator JS Dialog Boxes JS Timers

JAVASCRIPT ADVANCED

JS Date and Time JS Math Operations JS Type Conversions JS Event Listeners JS Event Propagation JS Borrowing Methods JS Hoisting Behavior JS Closures JS Strict Mode JS JSON Parsing JS Error Handling JS Regular Expressions JS Form Validation JS Cookies JS AJAX Requests JS ES6 Features

JAVASCRIPT EXAMPLES

JS Practice Examples JS FAQ's Answers

JAVASCRIPT REFERENCE

JavaScript DOM Styling

In this tutorial you will learn how to style elements in JavaScript.

Styling DOM Elements in JavaScript

You can also apply style on HTML elements to change the visual presentation of HTML documents dynamically using JavaScript. You can set almost all the styles for the elements like, fonts, colors, margins, borders, background images, text alignment, width and height, position, and so on.

In the following section we'll discuss the various methods of setting styles in JavaScript.

Setting Inline Styles on Elements

Inline styles are applied directly to the specific HTML element using the style attribute. In JavaScript the style property is used to get or set the inline style of an element.

The following example will set the color and font properties of an element with id="intro".

Example

Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JS Set Inline Styles Demo</title>
</head>
<body>
    <p id="intro">This is a paragraph.</p>
    <p>This is another paragraph.</p>
        
    <script>
    // Selecting element
    let elem = document.getElementById("intro");
    
    // Appling styles on element
    elem.style.color = "blue";
    elem.style.fontSize = "18px";
    elem.style.fontWeight = "bold";
    </script>
</body>
</html>

Naming Conventions of CSS Properties in JavaScript

Many CSS properties, such as font-size, background-image, text-decoration, etc. contain hyphens (-) in their names. Since, in JavaScript hyphen is a reserved operator and it is interpreted as a minus sign, so it is not possible to write an expression, like: elem.style.font-size

Therefore, in JavaScript, the CSS property names that contain one or more hyphens are converted to intercapitalized style word. It is done by removing the hyphens and capitalizing the letter immediately following each hyphen, thus the CSS property font-size becomes the DOM property fontSize, border-left-style becomes borderLeftStyle, and so on.

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 from the element having id="intro".

Example

Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JS Get Element's Style Demo</title>
</head>
<body>
    <p id="intro" style="color:red; font-size:20px;">This is a paragraph.</p>
    <p>This is another paragraph.</p>
        
    <script>
    // Selecting element
    let elem = document.getElementById("intro");
     
    // Getting style information from element
    alert(elem.style.color);  // Outputs: red
    alert(elem.style.fontSize);  // Outputs: 20px
    alert(elem.style.fontStyle);  // Outputs nothing
    </script>
</body>
</html>

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, as shown in the following example:

Example

Try this code »

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Get Computed Style Demo</title>
<style type="text/css">
    #intro {        
        font-weight: bold;
        font-style: italic;
    }
</style>
</head>
<body>
    <p id="intro" style="color:red; font-size:20px;">This is a paragraph.</p>
    <p>This is another paragraph.</p>
        
    <script>
    // Selecting element
    let elem = document.getElementById("intro");
     
    // Getting computed style information
    let styles = window.getComputedStyle(elem);
     
    alert(styles.getPropertyValue("color"));  // Outputs: rgb(255, 0, 0)    
    alert(styles.getPropertyValue("font-size"));  // Outputs: 20px
    alert(styles.getPropertyValue("font-weight"));  // Outputs: 700
    alert(styles.getPropertyValue("font-style"));  // Outputs: italic
    </script>
</body>
</html>

Tip: The value 700 for the CSS property font-weight is same as the keyword bold. The color keyword red is same as rgb(255,0,0), which is the rgb notation of a color.

Adding CSS Classes to Elements

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

Since, class is a reserved word in JavaScript, so JavaScript uses the className property to refer the value of the HTML class attribute. The following example will show to how to add a new class, or replace all existing classes to a <div> element having id="info".

Example

Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JS Add or Replace CSS Classes Demo</title>
<style>
    .highlight {
        background: yellow;
    }
</style>
</head>
<body>
    <div id="info" class="disabled">Something very important!</div>
        
    <script>
    // Selecting element
    let elem = document.getElementById("info");
    
    elem.className = "note";  // Add or replace all classes with note class
    elem.className += " highlight";  // Add a new class highlight
    </script>
</body>
</html>

There is even better way to work with CSS classes. You can use the classList property to get, set or remove CSS classes easily from an element. This property is supported in all major browsers except Internet Explorer prior to version 10. Here's an example:

Example

Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JS classList Demo</title>
<style>
    .highlight {
        background: yellow;
    }
</style>
</head>
<body>
    <div id="info" class="disabled">Something very important!</div>
    
    <script>
    // Selecting element
    let elem = document.getElementById("info");
     
    elem.classList.add("hide");  // Add a new class
    elem.classList.add("note", "highlight");  // Add multiple classes
    elem.classList.remove("hide"); // Remove a class
    elem.classList.remove("disabled", "note"); // Remove multiple classes
    elem.classList.toggle("visible"); // If class exists remove it, if not add it
     
    // Determine if class exist
    if(elem.classList.contains("highlight")) {
        alert("The specified class exists on the element.");
    }
    </script>
</body>
</html>

Previous Page Next Page

About Us

Our Story Terms of Use Privacy Policy

Contact

Interactive Tools

Bootstrap Icon Search Utility HTML Formatter Title & Meta Length Calculator HTML Color Picker Bootstrap Button Generator SQL Playground Font Awesome Icon Finder HTML Editor

TutorialRepublic

Share This:

You are visitor 01402503 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.