Set CSS style for an element
Written byPhuoc Nguyen
Created
17 Feb, 2020
Category
Level 1 — Basic
#Set a CSS style
Setting the style via the
`style` property:js
ele.style.backgroundColor = 'red';
ele.style['backgroundColor'] = 'red';
ele.style['background-color'] = 'red';Multiple styles can be set at the same time by overwriting or updating the
`cssText` property:js
// Add new style
el.style.cssText += 'background-color: red; color: white';
// Ignore previous styles
el.style.cssText = 'background-color: red; color: white';#Remove a CSS style
js
ele.style.removeProperty('background-color');
// Does NOT work
ele.style.removeProperty('backgroundColor');#See also
- Create a range slider
- Create an image comparison slider
- Create resizable split views
- Drag and drop element in a list
- Drag and drop table column
- Drag and drop table row
- Drag to scroll
- Get css styles of an element
- Make a draggable element
- Make a resizable element
- Measure the width of given text of given font
- Prevent body from scrolling when opening a modal
- Print an image
- Resize columns of a table
- Resize the width of a text box to fit its content automatically
- Scale a text to fit inside of an element
- Show a custom context menu at clicked position
- Show a loading indicator when an iframe is being loaded
- Show or hide an element
- Toggle an element
- Zoom an image
Questions? 🙋
Do you have any questions about front-end development? If so, feel free to create a new issue on GitHub using the button below. I'm happy to help with any topic you'd like to learn more about, even beyond what's covered in this post.
While I have a long list of upcoming topics, I'm always eager to prioritize your questions and ideas for future content. Let's learn and grow together! Sharing knowledge is the best way to elevate ourselves 🥷.
Recent posts ⚡
Newsletter 🔔
If you're into front-end technologies and you want to see more of the content I'm creating, then you might want to consider subscribing to my newsletter.
By subscribing, you'll be the first to know about new articles, products, and exclusive promotions.
Don't worry, I won't spam you. And if you ever change your mind, you can unsubscribe at any time.
Phước Nguyễn