How to Get an Single Element from a document in WinJS Library ?

If you want to get the single element from a document in a Windows Store App developed using WinJS library , the developers can utilize the WinJS.Utilities.id method.

How to Get an Single Element from a document in WinJS Library ?

Below is a sample code snippet demonstrating how to retrieve the element from the current document using the WinJS.Utilities.id() method.

<script type="text/javascript">
        WinJS.Utilities.id("Message").setStyle("color", "Yellow");
</script>

image

The above statement identifies the element “Message” and sets its foreground color to Yellow .

Note that we can also use the WinJS.Utilities.query method to perform the same operation as above. Below is the code snippet demonstrating the usage of Query method.

<script type="text/javascript">
        WinJS.Utilities.query("Message").setStyle("color", "Yellow");
</script>

Here’s the complete HTML page that is used in this sample.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>WinJSApp</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

    <script src="Scripts/jquery-2.1.1.js"></script>
    <!-- WinJSApp references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
    <style type="text/css">
        #Message {
            display:none;
        }
    </style>
</head>
<body>
    <div id="Message">
        This is a Welcome Message
    </div>
    <button id="btnDisplay">
        Click Me
    </button>
    <script type="text/javascript">
        WinJS.Utilities.id("Message").setStyle("color", "Yellow");
    </script>

</body>
</html>

Leave a Reply