{"id":4798,"date":"2022-03-28T02:00:00","date_gmt":"2022-03-28T00:00:00","guid":{"rendered":"https:\/\/alvarotrigo.com\/epa\/change-css-javascript\/"},"modified":"2025-06-11T11:36:05","modified_gmt":"2025-06-11T09:36:05","slug":"change-css-javascript","status":"publish","type":"post","link":"https:\/\/alvarotrigo.com\/blog\/change-css-javascript\/","title":{"rendered":"How To Change CSS With JavaScript [With Examples]"},"content":{"rendered":"\n

JavaScript is all about dynamic stuff and dealing with dynamic CSS changes is just one of the scenarios where JavaScript is exactly what we need.<\/p>\n\n\n\n

With JavaScript, we are able to set CSS styles for one or multiple elements in the DOM, modify them, remove them or even change the whole stylesheet for all your page.<\/p>\n\n\n\n

\"How<\/figure>\n\n\n\n

Let’s get into the different ways we can do achieve this:<\/p>\n\n\n

1. Change CSS inline properties with JavaScript<\/h2>\n\n\n

Setting individual styles directly from JavaScript is one of the most common scenarios when dealing with dynamic CSS styles.<\/p>\n\n\n\n

This way allows you to change the CSS styles for one or multiple elements present in the DOM.<\/p>\n\n\n\n

All you have to do is:<\/p>\n\n\n\n

    \n
  1. Query the element present in the DOM.<\/li>\n\n\n\n
  2. And set the style or styles for it one by one.<\/li>\n<\/ol>\n\n\n
    const<\/span> element = document<\/span>.querySelector('.demo'<\/span>);\nelement.style.backgroundColor = 'red'<\/span>;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    \n
    Notice that when setting the CSS styles using the style<\/code> property you have to write the CSS properties in camelcase. Instead of using a dash -<\/code> to separate the words you will have to write in capitals the first letter of each word. (backgroundColor<\/code>, fontSize<\/code>)<\/p>\n<\/blockquote>\n\n\n\n
    If you execute this code just like this, you’ll notice the change takes place on page load.<\/p>\n\n\n\n
    If you want to change the CSS styles dynamically you’ll have to attach this portion of code to some event.<\/p>\n\n\n\n
    For example, if you want to change the styles of your element when clicking on a button, then you have to first listen to the click<\/code> event and attach a function containing the previous code.<\/p>\n\n\n\n
    Here’s an example:<\/p>\n\n\n
    const<\/span> button = document<\/span>.querySelector('button'<\/span>);\nbutton.addEventListener('click'<\/span>, () => {\n    const<\/span> element = document<\/span>.querySelector('.demo'<\/span>);\n    element.style.backgroundColor = 'red'<\/span>;\n});\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n