HTML JavaScript

When working on websites, there are often situations where you need to modify the styles of HTML elements dynamically based on user interaction or other factors. Although CSS (Cascading Style Sheets) is typically used for styling HTML elements, JavaScript can be a powerful tool to modify styles at runtime. This allows for interactive, dynamic web experiences without needing to refresh the page.

In this blog, we will walk you through the process of modifying HTML element styles using JavaScript, focusing on how to integrate JavaScript with external CSS styles. We’ll cover the basics and then dive into more advanced examples to help you understand how to manipulate styles in a flexible and efficient way.

What You Need to Know About JavaScript and CSS

Before we dive into how to modify styles using JavaScript, let’s make sure you’re familiar with some basics.

  • CSS is used to define the look and feel of HTML elements. It’s usually written in a separate .css file and linked to the HTML document.
  • JavaScript is used to manipulate the DOM (Document Object Model) and can interact with the HTML and CSS to change how a webpage behaves or looks based on user interaction or other events.

While CSS is for static design, JavaScript can be used for making dynamic adjustments, which is useful for things like changing colors when a user clicks a button, changing layouts when resizing a window, or adding animations.

Step 1: How to Link External CSS to HTML

Before you can start modifying styles with JavaScript, you need an HTML document linked to an external CSS file.

1.Create your HTML file (index.html):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Modify Styles Using JavaScript</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1 id="heading">Hello, World!</h1>
  <button id="changeStyleButton">Change Style</button>

  <script src="script.js"></script>
</body>
</html>

2.Create an external CSS file (styles.css):

/* Basic Styling */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

#heading {
  color: blue;
  font-size: 40px;
  text-align: center;
  margin-top: 50px;
}

button {
  display: block;
  margin: 20px auto;
  padding: 10px 20px;
  background-color: green;
  color: white;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: darkgreen;
}

Here, we’ve linked an external CSS file to the HTML file using the <link> tag. This allows us to keep styles separate from the structure of the HTML, making it easier to manage.

Step 2: Modifying Styles with JavaScript

Now that we have an HTML document with external CSS linked, we can start modifying the styles dynamically using JavaScript. JavaScript can target specific elements and change their styles on the fly.

  1. Create your JavaScript file (script.js):
// Access the button and heading elements
const changeStyleButton = document.getElementById('changeStyleButton');
const heading = document.getElementById('heading');

// Event listener for button click
changeStyleButton.addEventListener('click', function() {
  // Modify the style of the heading
  heading.style.color = 'red';  // Change the color to red
  heading.style.fontSize = '50px';  // Increase the font size
  heading.style.textAlign = 'left';  // Align text to the left
});

In this example:

  • We’re targeting the button and the heading using document.getElementById().
  • Then, we add an event listener to the button, which will listen for the click event. When the button is clicked, we modify the style of the heading by directly manipulating the style property of the heading element.
  • You can see that styles like color, fontSize, and textAlign are changed dynamically using JavaScript.

Step 3: Understanding How JavaScript Modifies Styles

In the example above, we used JavaScript’s style property to directly change the CSS properties of an element. This is called inline styling, as it overrides the external styles defined in the styles.css file.

However, you should be aware that there are some limitations with inline styling:

  • Inline styles only modify the specific element.
  • They cannot access class-based styles in the external CSS file.
  • They directly apply the style to the element, potentially overriding any styles that come from the CSS file.

If you want to change the styles of multiple elements or use predefined styles in your CSS file, it’s better to work with CSS classes instead.

Step 4: Modifying Classes Dynamically Using JavaScript

Rather than applying styles directly with the style property, JavaScript allows you to add or remove CSS classes dynamically. This is a better practice because it allows you to manage styles through your external CSS, keeping your code clean and maintainable.

Here’s how you can toggle classes using JavaScript:

1.Update your CSS file (styles.css):

/* New class for modified styles */
.modified {
  color: red;
  font-size: 50px;
  text-align: left;
}

2.Update your JavaScript file (script.js):

// Access the button and heading elements
const changeStyleButton = document.getElementById('changeStyleButton');
const heading = document.getElementById('heading');

// Event listener for button click
changeStyleButton.addEventListener('click', function() {
  // Toggle the "modified" class on the heading element
  heading.classList.toggle('modified');
});

In this updated example:

  • The JavaScript code uses the classList.toggle() method to add or remove the modified class on the heading element.
  • The styles defined in the modified class will now be applied to the heading element when the button is clicked, without directly modifying the inline style.

This method keeps your styling in the external CSS file, which is the best practice for maintaining a clean separation between the structure and style of your web pages.

Conclusion

In this blog, we’ve explored the different ways you can modify the style of HTML elements dynamically using JavaScript, including:

  • Modifying inline styles directly through JavaScript.
  • Applying or removing classes dynamically to manipulate styles.

Both methods are useful, but for better maintainability and cleaner code, it’s generally recommended to work with classes and external CSS files. By combining JavaScript and CSS, you can create interactive, responsive, and dynamic web pages that will engage users and provide a seamless user experience.

By incorporating JavaScript and CSS together, you can unlock the full potential of dynamic styling and create websites that are not only functional but also visually appealing. Whether you’re building websites for businesses, creating web applications, or working on a personal project, mastering these techniques will help you enhance your web development skills.