HTML DOM Input Color type Property

HTMLWeb DevelopmentFront End Technology

<p>The HTML DOM Input Color type property returns/sets type of Input Color.</p><h2>Syntax</h2><p>Following is the syntax &minus;</p><ul class="list"><li>Returning string value</li></ul><pre class="result notranslate">inputColorObject.type</pre><ul class="list"><li>Setting <strong>type&nbsp;</strong>to string value</li></ul><pre class="result notranslate">inputColorObject.type = stringValue</pre><h2>String Values</h2><p>Here, &ldquo;<strong>stringValue</strong>&rdquo; can be the following &minus;</p><table class="table table-bordered"><thead><tr><th style="width: 17.619%; text-align: center;">stringValue</th><th style="width: 82.2449%; text-align: center;">Details</th></tr></thead><tbody><tr><td style="width: 17.619%;">Color</td><td style="width: 82.2449%;">It defines that input type is color</td></tr><tr><td style="width: 17.619%;">Radio</td><td style="width: 82.2449%;">It defines that input type is radio</td></tr><tr><td style="width: 17.619%;">Text</td><td style="width: 82.2449%;">It defines that input type is text</td></tr></tbody></table><h2>Example</h2><p>Let us see an example of <strong>Input Color type</strong> property &minus;</p><p><a class="demo" href="http://tpcg.io/eMJNW6" rel="nofollow" target="_blank">&nbsp;Live Demo</a></p><pre class="prettyprint notranslate">&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Input Color Type&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;form id=&quot;formForColorsInput&quot;&gt; Color Picker: &lt;input type=&quot;color&quot; id=&quot;Color&quot; name=&quot;primaryColor&quot; value=&quot;#0000ff&quot;&gt; &lt;/form&gt; &lt;button onclick=&quot;changeNameValue()&quot;&gt;Get type &amp; change to text&lt;/button&gt; &lt;div id=&quot;divDisplay&quot;&gt;&lt;/div&gt; &lt;script&gt; &nbsp; &nbsp;var inputColor = document.getElementById(&quot;Color&quot;); &nbsp; &nbsp;var divDisplay = document.getElementById(&quot;divDisplay&quot;); &nbsp; &nbsp;divDisplay.textContent = &#39;Type of Input: &#39;+inputColor.type; &nbsp; &nbsp;function changeNameValue() { &nbsp; &nbsp; &nbsp; if(inputColor.type == &#39;color&#39;){ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;var defaultColor = inputColor.defaultValue; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;inputColor.type = &#39;text&#39;; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;inputColor.value = defaultColor; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;divDisplay.textContent = &#39;Name of color input: &#39;+inputColor.type; &nbsp; &nbsp; &nbsp; } &nbsp; &nbsp;} &lt;/script&gt; &lt;/body&gt; &lt;/html&gt;</pre><h2>Output</h2><p>This will produce the following output &minus;</p><p>Before clicking <strong>&lsquo;Get type &amp; change to text&rsquo;</strong> button &minus;</p><p><img src="https://www.tutorialspoint.com/assets/questions/media/25449/get_type.jpg" class="fr-fic fr-dib" style="width:600px; height:111px;" width="600" height="111"></p><p>After clicking <strong>&lsquo;Get type &amp; change to text&rsquo;</strong> button &minus;</p><p><img src="https://www.tutorialspoint.com/assets/questions/media/25449/after_get_type.jpg" class="fr-fic fr-dib" style="width:600px; height:112px;" width="600" height="112"></p>
raja
Updated on 30-Jul-2019 22:30:26

Advertisements