🎓 Top 15 Udemy Courses (80-90% Discount): My Udemy Courses - Ramesh Fadatare — All my Udemy courses are real-time and project oriented courses.
▶️ Subscribe to My YouTube Channel (178K+ subscribers): Java Guides on YouTube
▶️ For AI, ChatGPT, Web, Tech, and Generative AI, subscribe to another channel: Ramesh Fadatare on YouTube
Table of Contents
- Using
styleProperty - Adding and Removing CSS Classes
- Using
setAttribute()to Change Styles - Conclusion
1. Using style Property
The style property is the most direct way to change an element's inline CSS styles in JavaScript. You can access and set individual CSS properties using this property.
Example:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Change Element Style</title>
</head>
<body>
<h1 id="heading">Hello, World!</h1>
<button onclick="changeStyle()">Change Style</button>
<script src="script.js"></script>
</body>
</html>
JavaScript (script.js):
function changeStyle() {
const heading = document.getElementById("heading");
heading.style.color = "blue";
heading.style.fontSize = "36px";
heading.style.backgroundColor = "yellow";
}
Explanation:
heading.style.color = "blue";changes the text color of the heading to blue.heading.style.fontSize = "36px";changes the font size.heading.style.backgroundColor = "yellow";adds a yellow background to the heading.
Important Notes:
- CSS properties with hyphens (e.g.,
background-color) are converted to camelCase in JavaScript (e.g.,backgroundColor). - This method sets the style inline, meaning it will override any styles set in external or internal CSS files.
2. Adding and Removing CSS Classes
Instead of directly changing the inline styles, you can use CSS classes to apply multiple styles at once. This is a more structured approach, especially when you need to apply the same styles to multiple elements.
Example:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.highlight {
color: white;
background-color: red;
padding: 10px;
}
</style>
<title>Change Element Style</title>
</head>
<body>
<h1 id="heading">Hello, World!</h1>
<button onclick="toggleHighlight()">Toggle Highlight</button>
<script src="script.js"></script>
</body>
</html>
JavaScript (script.js):
function toggleHighlight() {
const heading = document.getElementById("heading");
heading.classList.toggle("highlight");
}
Explanation:
- The
toggleHighlight()function usesclassList.toggle()to add or remove the"highlight"class from the<h1>element. - The
.highlightclass contains predefined styles in the CSS block (color,background-color, andpadding). - This method keeps your styling separated from your JavaScript logic, which is better for maintainability.
Other Class Manipulation Methods:
element.classList.add("className"): Adds a class to the element.element.classList.remove("className"): Removes a class from the element.element.classList.contains("className"): Checks if the element has a specific class.
3. Using setAttribute() to Change Styles
Another way to change the style is by using setAttribute(), which modifies the style attribute directly.
Example:
const heading = document.getElementById("heading");
heading.setAttribute("style", "color: green; background-color: lightgray;");
Explanation:
setAttribute("style", "css-rules")allows you to directly modify thestyleattribute, setting multiple CSS properties at once.- However, this method overwrites the existing inline styles. If the element already has some inline styles, they will be replaced.
4. Conclusion
Changing the style of an element in JavaScript is simple, and there are multiple ways to achieve it. The style property allows you to set individual styles directly, while CSS classes provide a cleaner, more maintainable approach. Using setAttribute() is another option, but it can overwrite existing styles.
Key Points:
styleproperty: Directly modifies inline styles for individual CSS properties.- CSS classes: Use
classList.add(),classList.remove(), andclassList.toggle()to apply styles via CSS classes. setAttribute(): Directly sets thestyleattribute with a string of CSS rules, but may overwrite existing inline styles.
Using CSS classes is generally preferred for better organization and maintainability, while the style property is useful for specific, dynamic changes.
My Top and Bestseller Udemy Courses. The sale is going on with a 70 - 80% discount. The discount coupon has been added to each course below:
Build REST APIs with Spring Boot 4, Spring Security 7, and JWT
![[NEW] Learn Apache Maven with IntelliJ IDEA and Java 25](https://img-c.udemycdn.com/course/750x422/6852721_b512_2.jpg "[NEW] Learn Apache Maven with IntelliJ IDEA and Java 25")
[NEW] Learn Apache Maven with IntelliJ IDEA and Java 25
ChatGPT + Generative AI + Prompt Engineering for Beginners
Spring 7 and Spring Boot 4 for Beginners (Includes 8 Projects)
Available in Udemy for Business
Building Real-Time REST APIs with Spring Boot - Blog App
Available in Udemy for Business
Building Microservices with Spring Boot and Spring Cloud
Available in Udemy for Business
Java Full-Stack Developer Course with Spring Boot and React JS
Available in Udemy for Business
Build 5 Spring Boot Projects with Java: Line-by-Line Coding
Testing Spring Boot Application with JUnit and Mockito
Available in Udemy for Business
Spring Boot Thymeleaf Real-Time Web Application - Blog App
Available in Udemy for Business
Master Spring Data JPA with Hibernate
Available in Udemy for Business
Spring Boot + Apache Kafka Course - The Practical Guide
Available in Udemy for Business
Comments
Post a Comment
Leave Comment