Add control custom property resolution with javascript


Previously, we said to add custom attributes for HTML elements, which are added manually in HTML controls. In fact, we can add them dynamically in javascript: if there is a text box:

<input type="text" id="txtInput" name="txtInput" value=" Custom text ">

If you want to add the idvalue attribute (the value is “custom value”), you can write in javascript like this:

var txt = document.getElementById("txtInput");
txt.setAttribute("idvalue"," The custom value ");

The first parameter in setAttribute specifies the name of the custom attribute, and the second parameter is the initial value

The code is as follows:

<html>
<head>
    <title> with javascript Add control custom properties </title>
    <script language="javascript">
        function addCustomAttribute()
        {
            var txt = document.getElementById("txtInput");
            txt.setAttribute("idvalue"," The custom value ");
        }

        function showIdValue()
        {
                var txt = document.getElementById("txtInput");
                alert(txt.attributes["idvalue"].nodeValue);
        }
    </script>
</head>
<body onload="addCustomAttribute();">
    <input type="text" id="txtInput" name="txtInput" value=" Custom text ">
    <input type="button" value=" According to idValue" onclick="showIdValue();">
</body>
</html>