DEV Community

Cover image for Day 20 of leaning MERN stack
Ali Hamza
Ali Hamza

Posted on

Day 20 of leaning MERN stack

Hello Dev Community! ๐Ÿ‘‹

Wow, it is officially Day 20! Reaching this milestone feels incredible. Today, I jumped into Lecture 7 of Apna College's JavaScript playlist with Shradha Didi, continuing my deep dive into DOM Manipulation.

Todayโ€™s session was all about power and controlโ€”learning how to change element attributes and inject CSS styling directly from our JavaScript files.


๐Ÿง  Key Learnings From JS Lecture 7 (DOM Part 2)

I mastered two main pillars of element manipulation today:

1. Handling HTML Attributes

Attributes give extra information about elements (like id, class, src, or href). I learned how to interact with them programmatically:

  • getAttribute(attr): To read the value of an attribute (e.g., checking what class a div has).
  • setAttribute(attr, value): To change or overwrite an attribute value instantly through code.

2. Changing Styles Dynamically (element.style)

I learned that we can access any element's style property directly using JavaScript. For example:


javascript
let box = document.querySelector("#box");
box.style.backgroundColor = "blue";
box.style.fontSize = "20px";
Enter fullscreen mode Exit fullscreen mode

Top comments (0)