Fabric.js addClass() 方法
使用Fabric.js的addClass()方法可以将指定的类添加到指定的HTML元素中。必须首先选择页面中的HTML元素才能使用此方法。
语法:
addClass(element, className)
参数: 此方法接受两个参数,如上所述并以下面所述进行描述:
- element: 此参数用于指定要添加类的HTML元素。
- className: 此参数用于指定要添加到元素的类。
下面的示例演示了Fabric.js中的 addClass() 方法:
示例:
<!DOCTYPE html>
<html>
<head>
<!-- Adding the Fabric.js library -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js">
</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;">
GeeksforGeeks
</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>
输出: