DONATE  
MENU
JSON
JAVASCRIPT
HTML
AJAX

JavaScript Tutorials

INTRODUCTION

» Introduction to JavaScript

» Practice IT Editor

» JavaScript Example

» JavaScript Placement

» JavaScript Syntax

» JavaScript Statements

» JavaScript Input

» JavaScript Output

» JavaScript Comments

» JavaScript Variables

» Variables' Scope

» JavaScript Operators

» JS Expressions & Concatenation

» JavaScript Data Type

» JavaScript Numbers

» Number Object

» JavaScript Strings

» String Object

» JavaScript Booleans

» Boolean Object

» JavaScript Functions

» JavaScript Arrays

» Array Object - Properties

» Array Object - Methods

» JavaScript Objects

» JavaScript Undefined

» JavaScript Nulls

CONDITIONAL TESTING

» If Statement

» If Else Statement

» JavaScript Ternary Operator

» Switch Statement

LOOPS

» For Loops

» While Loops

» Break & Continue

» For...In Loops

» do...while Loop

FUNCTIONS

» JavaScript Functions

» Creating Functions

» Functions' Parameters

» Functions' Arguments

» Function Invocation

» The Return Keyword

» The Arguments Object

» Callback Functions

» Arrow Functions

ARRAYS

» JavaScript Arrays

» Creating Arrays

» Accessing Arrays

» Looping Arrays

» Multi - dimensional Arrays

OBJECTS

» JavaScript Objects

» Creating Objects

» Prototype Definition

» Accessing Objects

» The this Keyword

AJAX

» Introduction to AJAX

JSON

» Introduction to JSON

JAVASCRIPT DATES

» The Date Object

» Date Methods

» Timing (SetInterval & SetTimeout)

MATH OBJECT

» Math Object

» Math Methods

HTML / JS DOM

» DOM Introduction

» Accessing HTML Elements in DOM

» Get And Change Elements' Contents & Values

» Change Styling - DOM CSS

» DOM Attributes

» JavaScript Event Listeners

» DOM Event Listeners

» JS Events

MISCELLANEOUS

» JS Strict Mode

» JavaScript Hoisting

» JavaScript let keyword

» Reserved Keywords

» JS Best Practices

» JavaScript vs ECMAScript

JAVASCRIPT EXAMPLES

» JavaScript Calculator

.. » JavaScript » Html / Js Dom » Change Styling - DOM CSS
Share Tweet WhatsApp

Change Styling - DOM CSS

Using the JavaScript/HTML document object, you can access an element, get its style attribute and change one or more CSS style values. Below we shall get familiarized with ways to use JavaScript DOM in adding, changing or removing CSS properties from a webpage. Example
<style>
body{
background-color:black;
}
</style>

<button onclick='changebg()'>CHANGE BACKGROUND</button>

<script>
function changebg(){
var body = document.getElementsByTagName("body");
body[0].style.backgroundColor = "green";
}
</script>

Copy PRACTICE IT

Above, using the DOM, we accessed the body element of a webpage, got its style attribute and changed the background color value when a button is clicked. style The style property is a property that every HTML element's object possesses. It's value is an object containing all the CSS style properties of the element's style attribute. The style object looks like,
{backgroundColor:"", border:"", color:"", marginTop:"", ...}
This means, to access any individual style property e.g color, we need to go through, document -> getElement -> style -> CSS property
document.getElementById("myId").style.color = "red"; //will change element color to red
document.getElementsByTagName("p")[0].style.margin = "20px"; //will change the first paragraph element margin to 20px
NOTE:
  • If the style property we want to access or change comprises of two or more words joined together using the minus or dash sign (-) e.g background-color, margin-top and others, in the style object, the minus sign is removed while the other word or words begin with a capital letter e.g background-color ->backgroundColor, margin-top ->marginTop, border-bottom ->borderBottom and etcetera. This is to ensure JavaScript doesn't confuse the sign for the arithmetic operator, minus(-).
With the properties of the DOM style property, you can add, remove or change just any styling applied on an element. Add/change a style(s)
<div style='color:red;' id='div1' onclick='change()'>I can add some styles if you click on me.<br/><br/>Just try it.</div>

<script>
function change(){
var div1 = document.getElementById("div1");
div1.style.backgroundColor = "blue";
div1.style.color = "pink";
}
</script>

Copy PRACTICE IT

Remove style(s) To remove any style property, simply change the value to nothing("").
<div style='color:red;' id='div1' onclick='change()'>I can remove my colors if you click on me.<br/><br/>Just try it.</div>

<script>
function change(){
var div1 = document.getElementById("div1");
div1.style.color = "";
}
</script>

Copy PRACTICE IT

cssText The cssText property is a property of the style object that allows us to define multiple styles on an element just the way we do when defining styles using an attribute on an element.
NOTE:
  • If the cssText is used, it erases the previous styles defined on an element style attribute and applies the new styles.
<div id='mydiv' onclick='changeMyDiv()' style='font-weight:bold; font-size:2em; color:blue;'>Tap me to apply new stylings.</div>

<script>
function changeMyDiv(){
var myDiv = document.getElementById("mydiv");
myDiv.style.cssText = "background-color:red; height:20%; border:1px solid black;";
}
</script>

Copy PRACTICE IT

Notice how the previously defined styles were removed and replaced with the new styles. But this won't affect styles defined in a <style> element. Just those define in the element's style attribute.
<style>
#mydiv{
font-weight:bold; 
font-size:2em; 
color:blue;
}
</style>
<div id='mydiv' onclick='changeMyDiv()' style='border:5px solid red; padding:5px;'>Tap me to apply new stylings.</div>

<script>
function changeMyDiv(){
var myDiv = document.getElementById("mydiv");
myDiv.style.cssText = "background-color:red; height:20%; border:1px solid black;";
}
</script>

Copy PRACTICE IT

In the above, the element's styling defined with the <style> tag were not affected. getAttribute() & setAttribute() Both the getAttribute() and setAttribute() methods of the document object model help us get the value of an element attribute and to also set new attributes respectively. We can use both to also add styles to our HTML elements if properly use. First, we use the getAttribute() method to get the previous styles of the element and then, use the setAttribute() to set the style attribute again on the element but this time, with both the previous and new styles.
<div id='mydiv' onclick='changeMyDiv()' style='font-weight:bold; font-size:2em; color:blue;'>Tap me to apply new stylings.</div>

<script>
function changeMyDiv(){
var myDiv = document.getElementById("mydiv");
var previous_style = myDiv.getAttribute("style"); //gets and stores element's previous style... It is empty if none found in the style attribute
myDiv.setAttribute("style",previous_style+"background-color:red; height:20%; border:1px solid black;"); //Assign new styles alongside the previous
}
</script>

Copy PRACTICE IT

SUMMARY
  1. With the DOM, we can also manipulate a webpage and its elements styling.
  2. The object created for every element of a webpage has a style property.
  3. This style property in turn contains an object whose properties are all possible CSS style properties that can be applied on an element.
  4. We can therefore access these individual properties to get or change their value. When we change their value, it reflects on the webpage without it reloading.
  5. There is also a unique cssText property that enables us to add multiple styles to an element just the way we would add style to an element using the HTML style attribute.
  6. We also introduced you to how you can add, change and remove styles using both the getAttribute() and setAttribute() of the DOM. After all, programming is all about computer manipulation to achieve what we want.
Take a short quiz on Change Styling - DOM CSS.
Ask a question or tell us if Change Styling - DOM CSS is easy or not.
cent?

Join our 1,090 subscribers to receive tutorials' updates!

  We won't spam your mail box. We hate it.





StackBeginner 2021 © Joseph Omamode