Add control custom property resolution with javascript

2020-03-29 23:57:10
OfStack

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>