The addClass() method in Fabric.js is used to add the specified class to the specified HTML element. The HTML element in the page has to be selected first to pass this method.
Syntax:
addClass(element, className)
Parameters: This method accept two parameters as mentioned above and described below:
- element: This parameter is used to specify the HTML element on which the class has to be added.
- className: This parameter is used to specify the class that has to be added to the element.
The below example demonstrates the addClass() method in Fabric.js:
Example:
HTML
<!DOCTYPE html> <html>   <head>       <!-- Adding the Fabric.js library -->    <script src=     </script>       <style>               /* Define the CSS classes to be used */         .box1 {             margin: 12px;             width: 100px;             height: 100px;             background-color: red;         }           .box2 {             margin: 12px;             width: 100px;             height: 100px;             background-color: green;         }           .border {             border: 5px dashed;         }     </style> </head>   <body>     <h1 style="color: green;">         neveropen     </h1>     <h3>         Fabric.js util.addClass() Method     </h3>       <div id="box1">Box 1</div>     <div id="box2">Box 2</div>           <script>           // Select the element that has         // to be applied the classes         let elem =             document.querySelector('#box1');         let elem2 =             document.querySelector('#box2');           // Add the required classes         // to the element         fabric.util.addClass(elem, 'box1');         fabric.util.addClass(elem, 'border');           fabric.util.addClass(elem2, 'box2');         fabric.util.addClass(elem2, 'border');     </script> </body>   </html> |
Output:
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
