.svg)
Let's stay on the subject of CSS. Combining CSS and JavaScript is a important way to create dynamic websites. In many cases, you’ll want to modify styles using JavaScript, either in response to user input or to create smooth animations. Let's look at some examples of how you can do this.
1. Inline Styles
The easiest way to manipulate CSS with JavaScript is by modifying the inline styles of an element directly using the style property.
```
<button id="colorBtn">Change Background</button>
<div id="box" style="width: 100px; height: 100px; background-color: lightblue;"></div>
<script>
const button = document.getElementById('colorBtn');
const box = document.getElementById('box');
button.addEventListener('click', () => {
box.style.backgroundColor = 'tomato';
});
</script>
```
Here, clicking the button changes the background color of the div. This method works for directly applying or modifying individual CSS properties.
2. Manipulating CSS Classes
Rather than directly manipulating individual CSS properties, a more maintainable approach is to add, remove, or toggle CSS classes using JavaScript. This way, you keep all your styles in a CSS file and simply tell JavaScript to apply or remove those classes.
```
<button id="toggleBtn">Toggle Dark Mode</button>
<div id="box" class="light-mode"></div>
<style>
.light-mode {
background-color: lightgray;
width: 100px;
height: 100px;
}
.dark-mode {
background-color: black;
color: white;
}
</style>
<script>
const toggleButton = document.getElementById('toggleBtn');
const box = document.getElementById('box');
toggleButton.addEventListener('click', () => {
box.classList.toggle('dark-mode');
});
</script>
```
Here, we use classList.toggle to switch between light and dark mode. This method is more scalable and easier to maintain because your styles are kept in CSS files.
3. Responsive Design
CSS variables (–custom-property) allow you to define dynamic values that can be updated through JavaScript, making it an effective way to handle themes and responsive styles.
```
<style>
:root {
--box-color: pink;
}
.variable-box {
width: 100px;
height: 100px;
background-color: var(--box-color);
}
</style>
<div class="variable-box"></div>
<button id="changeColor">Change Color</button>
<script>
const button = document.getElementById('changeColor');
button.addEventListener('click', () => {
document.documentElement.style.setProperty('--box-color', 'skyblue');
});
</script>
```
In this example, we use JavaScript to update a CSS variable (–box-color) that controls the background color of the box. This approach is excellent for creating theme-able and responsive designs.
By combining CSS and JavaScript, you can build interactive user interfaces that react to user input and adapt to changing conditions. Remember to choose the right approach based on your use case. For simple changes, inline styles might suffice. For more scalable, maintainable code, manipulating CSS classes is the way to go. And if you need complete control, modifying CSS variables can offer flexibility.
-min.png)