Animations

API

Arrays

Async

Basics

Challenges

Classes

Console

Dates

Debugging

DOM Elements

DOM Methods

DOM Navigation

DOM Properties

Event Listeners

Flow Control

Forms

Functions

Global Functions

JSON

Keywords

Libraries (3rd party)

Math

Modules

Objects

Snippets

String

Types

Widgets

Window Object

JavaScript - Changing Properties

You can also convert an HTML element into a object and change it's relevant properties. You can change the style on text elements, src on image elements and so on.

Hello World


let p1 = document.getElementById("paragraph1");
p1.style = "color:red";

let img1 = document.getElementById("image1");
img1.src = "../../assets/images/minion.jpg";


Changing CSS

You can also change CSS by updating the style property of a DOM Element. This is not the preferred method as it only adds in-line styles to the element. (A more preferred way is to use the setAttribute method and change the CSS Class.)

Hello World


document.getElementById("paragraph2").style.color = "blue";
document.getElementById("paragraph2").style.fontWeight = "bold";