Manipulating CSS with TypeScript: A Beginner's Guide

12.5 Manipulating CSS with TypeScript

In this section, we will explore how to manipulate CSS using TypeScript. As you may know, CSS (Cascading Style Sheets) is used to style HTML elements on a web page. With TypeScript, you can dynamically change these styles and classes, allowing for interactive and responsive web applications. Let’s dive in!

Modifying Inline Styles

Inline styles are CSS rules applied directly to an HTML element via the style attribute. TypeScript allows us to modify these styles programmatically using the style property of a DOM element.

Accessing the style Property

To modify an inline style, you first need to access the style property of a DOM element. Here’s a simple example:

// Select the element by its ID
const element = document.getElementById('myElement');

// Check if the element exists
if (element) {
  // Change the background color to blue
  element.style.backgroundColor = 'blue';
}

In this example, we select an element with the ID myElement and change its background color to blue. The style property provides access to various CSS properties, allowing you to modify them directly.

Commonly Used CSS Properties

Here are some common CSS properties you might want to modify:

• color: Changes the text color.
• backgroundColor: Changes the background color.
• width: Sets the width of the element.
• height: Sets the height of the element.
• margin: Sets the margin around the element.
• padding: Sets the padding inside the element.
• border: Sets the border around the element.

Example: Changing Multiple Styles

You can change multiple styles at once using the style property. Here’s an example:

if (element) {
  element.style.color = 'white';
  element.style.backgroundColor = 'black';
  element.style.padding = '10px';
  element.style.border = '2px solid red';
}

This example sets the text color to white, background color to black, padding to 10 pixels, and border to a 2-pixel solid red line.

Managing CSS Classes with classList

While inline styles are useful for quick changes, using CSS classes is a more efficient and maintainable way to style elements. The classList property of a DOM element allows you to add, remove, and toggle CSS classes.

Adding and Removing Classes

To add or remove a class, you can use the add and remove methods of classList:

if (element) {
  // Add a class
  element.classList.add('active');

  // Remove a class
  element.classList.remove('inactive');
}

In this example, we add the active class and remove the inactive class from the element.

Toggling Classes

The toggle method is useful for switching a class on and off:

if (element) {
  // Toggle the 'highlight' class
  element.classList.toggle('highlight');
}

This will add the highlight class if it is not present, and remove it if it is.

Checking for a Class

You can check if an element has a specific class using the contains method:

if (element) {
  if (element.classList.contains('active')) {
    console.log('Element is active');
  } else {
    console.log('Element is not active');
  }
}

Dynamic Styling Based on User Interactions

TypeScript can be used to dynamically change styles based on user interactions, such as clicks or hover events. This can enhance the user experience by providing visual feedback.

Example: Changing Styles on Click

Let’s create an example where we change the background color of an element when it’s clicked:

const button = document.getElementById('myButton');

if (button) {
  button.addEventListener('click', () => {
    if (element) {
      element.style.backgroundColor = element.style.backgroundColor === 'blue' ? 'green' : 'blue';
    }
  });
}

In this example, we add a click event listener to a button. When the button is clicked, it toggles the background color of myElement between blue and green.

Example: Hover Effects

You can also change styles on hover using mouse events:

if (element) {
  element.addEventListener('mouseover', () => {
    element.style.backgroundColor = 'yellow';
  });

  element.addEventListener('mouseout', () => {
    element.style.backgroundColor = '';
  });
}

This example changes the background color to yellow when the mouse is over the element and reverts it when the mouse leaves.

Considerations for CSS Specificity and Performance

When manipulating CSS, it’s important to consider specificity and performance.

CSS Specificity

CSS specificity determines which styles are applied when multiple rules match an element. Inline styles have the highest specificity, followed by IDs, classes, and element selectors. Using classes is generally preferred over inline styles for maintainability and separation of concerns.

Performance Considerations

Frequent manipulation of styles can impact performance, especially in large applications. To optimize performance:

• Batch Style Changes: Apply multiple style changes at once to minimize reflows and repaints.
• Use Classes: Toggle classes instead of changing individual styles to leverage CSS rules.
• Avoid Inline Styles: Use inline styles sparingly and prefer CSS classes.

Encouraging Separation of Concerns

Separation of concerns is a design principle that promotes organizing code into distinct sections, each handling a specific aspect of functionality. In web development, this means separating HTML, CSS, and JavaScript.

Using CSS Classes Over Inline Styles

Using CSS classes instead of inline styles promotes separation of concerns. It allows you to define styles in a stylesheet and apply them via classes, making your code more maintainable and reusable.

/* styles.css */
.active {
  background-color: green;
  color: white;
}

// TypeScript code
if (element) {
  element.classList.add('active');
}

By defining styles in a CSS file and applying them through TypeScript, you maintain a clean separation between style and behavior.

Try It Yourself

Now that we’ve covered the basics, try experimenting with the code examples. Here are some ideas:

• Change the text color of an element when a button is clicked.
• Toggle multiple classes on an element based on different user interactions.
• Create a hover effect that changes the size of an element.

Visual Aids

To better understand the DOM and CSS manipulation, let’s look at a simple DOM tree diagram:

    graph TD;
	    HTML --> BODY;
	    BODY --> DIV1[div#myElement];
	    DIV1 --> BUTTON[button#myButton];

Diagram Description: This diagram represents a simple DOM structure with a div element having an ID myElement and a button element with an ID myButton.

Summary

In this section, we learned how to manipulate CSS using TypeScript. We explored modifying inline styles, managing CSS classes, and dynamically changing styles based on user interactions. We also discussed the importance of CSS specificity, performance considerations, and the principle of separation of concerns.

Additional Resources

For more information on CSS and DOM manipulation, check out these resources:

• MDN Web Docs: CSS
• MDN Web Docs: DOM
• W3Schools: CSS

Quiz Time!