Animations
API
Arrays
Async
Basics
Challenges
Classes
Console
Dates
Debugging
DOM Elements
DOM Methods
DOM Properties
Event Listeners
Flow Control
Forms
Functions
Global Functions
JSON
Keywords
Libraries (3rd party)
Math
Modules
Objects
Snippets
String
Types
Widgets
Window Object
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";