In this tutorial, we will write a JavaScript function that takes two parameters: an HTML element and an object containing new ID and class names. The function will change the element’s ID and class names to the new values.
The first step is prepare our HTML page, like so:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change ID and Class Name</title>
</head>
<body>
<div id="my-div" class="blue">Hello, world!</div>
<script src="script.js"></script>
</body>
</html>The next step is to create script.js file where we will store our changeElementIDAndClass function:
script.js
function changeElementIDAndClass(element, newAttributes) {
if (newAttributes.hasOwnProperty('id')) {
element.id = newAttributes.id;
}
if (newAttributes.hasOwnProperty('class')) {
element.className = newAttributes.class;
}
}This function checks if the ‘id’ and ‘class’ properties exist in the newAttributes object. If they do, the function changes the element’s ID and class names accordingly.
Call the changeElementIDAndClass function:
const myElement = document.getElementById('my-div');
const newAttributes = {
id: 'new-id',
class: 'red',
};
changeElementIDAndClass(myElement, newAttributes);This code selects the element with the ID ‘my-div’ and creates a newAttributes object with the desired new ID and class name. It then calls the changeElementIDAndClass function with the element and newAttributes object as arguments.
After running this code, the div element’s ID will be changed to ‘new-id’ and its class name will be changed to ‘red’.
That’s it! We’ve created a JavaScript function that changes an HTML element’s ID and class names based on the given object. You can now use this function to easily modify the ID and class names of other elements in your projects.
When is a function like this useful?
Changing an element’s ID or class names using a function like this can be useful in various scenarios, such as:
- Dynamic styling: When you want to apply different styles to elements based on user interactions or application state changes. By changing the class name, you can apply different CSS rules to the element, which can result in visual changes like color, size, or layout.
- Toggle functionality: You might want to enable or disable certain features in your web application based on user actions. Toggling class names can help you show or hide elements, or change their appearance and behavior.
- Responsiveness: You can use this function to apply different styles to elements depending on the device or screen size. By changing class names, you can adjust the layout and appearance of your web application for various devices.
- State management: In complex web applications, it’s common to manage the state of elements. Changing the ID or class name of an element can be a way to keep track of its current state and adjust its behavior accordingly.
- Accessibility: You may want to change an element’s class name to apply different styles or attributes that improve the accessibility of your web application for users with disabilities.
- Animations and transitions: By changing an element’s class name, you can trigger CSS animations or transitions to create smooth and interactive visual effects.
- Component-based design: In modern web development, it’s common to use a component-based approach to build modular and reusable UI elements. Changing an element’s ID or class name can help with component customization, theming, or adapting components for different use cases.
Keep in mind that while changing an element’s ID or class name can be helpful in these scenarios, it’s essential to use this technique judiciously. Excessive manipulation of the DOM can lead to performance issues and make the code more challenging to maintain. In many cases, modern front-end frameworks like React, Angular, or Vue.js provide more efficient ways to handle dynamic class changes and application state management.