jQWidgets jqxDraw getAttr() Method

Last Updated : 26 Jan, 2022

jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful, optimized, platform-independent, and widely supported framework. The jqxDraw is a small jQuery-based plugin that is used to draw shapes and texts using VML, SVG and HTML5

The getAttr() method is used for getting the element’s attribute of the specified jqxDraw widget.

Syntax:

var fillColor = renderer.getAttr(element, attributes);

Parameters: This method accepts two parameters that are illustrated below:

element: This is the element whose attribute value is going to be returned.
attributes. This is the optional parameter that is the name of the attribute.

Return values: This method returns the value of the element’s attribute.

Linked Files: Download jQWidgets from the given link. In the HTML file, locate the script files in the downloaded folder.

<link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”scripts/jquery.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdraw.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqx-all.js”></script>

Example: The below example illustrates the jQWidgets jqxDraw getAttr() Method.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <link rel="stylesheet" type="text/css" 
          href= 
            "jqwidgets/styles/jqx.base.css" /> 
    <script type="text/javascript" src= 
            "scripts/jquery-1.11.1.min.js"> 
    </script> 
    <script type="text/javascript" src= 
            "jqwidgets/jqxcore.js"> 
    </script> 
    <script type="text/javascript" src= 
            "jqwidgets/jqxdraw.js"> 
    </script> 
    <script type="text/javascript" src= 
            "jqwidgets/jqx-all.js"> 
    </script> 
</head> 
  
<body> 
    <center> 
        <h1 style="color:green;"> 
            GeeksforGeeks 
        </h1> 
        <h3>jQWidgets jqxDraw getAttr() Method</h3> 
        <div id="jqx_Draw" style="height:200px; width:280px;"> 
        </div> 
        <input type="button" id="Button_for_getAttr" 
               style="padding:5px 15px; margin-top:40px;"
            value="Get element's attribute"> 
        <div id="log"></div> 
        <script type="text/javascript"> 
            $(document).ready(function () { 
                $('#jqx_Draw').jqxDraw(); 
                var Instance = $('#jqx_Draw').jqxDraw('getInstance'); 
                var Circle_Element =  
                    Instance.circle(150, 100, 65, { fill: 'green' }); 
                Instance.refresh(); 
                var Color =  
                    Instance.getAttr(Circle_Element, 'fill'); 
                $("#Button_for_getAttr").click(function () { 
                    $("#log").html(Color); 
                }); 
            }); 
        </script> 
    </center> 
</body> 
  
</html>