HTML DOM 中的Input Color Object 属性用于创建和访问对象内的 元素。 用于在输入字段中输入数据。允许用户输入数据的输入控件的声明可以通过在 中使用的 元素来完成。 句法： 它用于访问 元素。 <div class="hcb_wrap"> <pre class="prism line-numbers lang-html" data-lang="HTML"><code class="replace">var x = document.getElementById("myColor");</code></pre> </div> </li> <li>它用于创建 <iframe> 元素。 <div class="hcb_wrap"> <pre class="prism line-numbers lang-html" data-lang="HTML"><code class="replace">var x = document.createElement("INPUT");</code></pre> </div> </li> </ul> <p><strong>属性值：</strong></p> <ul> <li> <strong>autocomplete：</strong>用于设置或返回颜色选择器的自动完成属性。</li> <li> <strong>autofocus：</strong>用于设置或返回页面自动获得焦点时的颜色选择器。</li> <li> <strong>defaultValue：</strong>用于设置或返回颜色选择器的默认值。</li> <li> <strong>disabled：</strong>用于设置或返回颜色选择器是否禁用。</li> <li> <strong>form：</strong>它返回包含颜色选择器的表单的引用。</li> <li> <strong>list：</strong>它返回包含颜色选择器的元素的引用。</li> <li> <strong>name：</strong>用于设置或返回颜色选择器的名称属性。</li> <li> <strong>type：</strong>它返回颜色选择器的表单元素类型。</li> <li> <strong>value：</strong>用于设置或返回颜色选择器的 value 属性。</li> </ul> <p><strong>示例 1：</strong>此示例描述了 getElementById() 方法来访问具有 type = “color” 属性的 <input> 元素。 </p> <div class="hcb_wrap"> <pre class="prism line-numbers lang-html" data-lang="HTML"><code class="replace"><!DOCTYPE html> <html> <head> <title> HTML DOM Input Color Object Property </title> </head> <body> <h2> HTML DOM Input Color Object Property </h2> <p> Select your favorite color: <input type = "color" value = "#009900" id = "color"> </p> <p>Click on the button to get the color value</p> <button onclick = "myGeeks()"> Click Here! </button> <p id = "GFG"></p> <!-- script to return the input color --> <script> function myGeeks() { var x = document.getElementById("color").value; document.getElementById("GFG").innerHTML = x; } </script> </body> </html> </code></pre> </div> <p><strong>输出：</strong><br/><strong>点击按钮前：</strong> <br/><img alt="颜色对象" class="img-fluid" src="https://mangodoc.oss-cn-beijing.aliyuncs.com/geek8geeks/HTML_%7C_DOM_Input_Color_Object_0.jpg"/><br/><strong>点击按钮后：</strong> <br/><img alt="颜色对象" class="img-fluid" src="https://mangodoc.oss-cn-beijing.aliyuncs.com/geek8geeks/HTML_%7C_DOM_Input_Color_Object_1.jpg"/></p> <p></p> <div class="_ap_apex_ad" id="d6f45c53-ff16-4cc5-8b91-eb6ee7037116" style="min-height:280px"></div> <p></p> <p><strong>示例 2：</strong>此示例描述了 document.createElement() 方法以创建具有 type = “color” 属性的 <input> 元素。 </p> <div class="hcb_wrap"> <pre class="prism line-numbers lang-html" data-lang="HTML"><code class="replace"><!DOCTYPE html> <html> <head> <title> HTML DOM Input Color Object Property </title> </head> <body> <h2> HTML DOM Input Color Object Property </h2> <button onclick = "myGeeks()"> Click Here! </button> <!-- script to create input color element --> <script> function myGeeks() { /* Create input element */ var x = document.createElement("INPUT"); /* Set color attribute */ x.setAttribute("type", "color"); /* Set clor value */ x.setAttribute("value", "#009900"); document.body.appendChild(x); } </script> </body> </html> </code></pre> </div> <p><strong>输出：</strong><br/><strong>点击按钮前：</strong> <br/><img alt="颜色对象" class="img-fluid" src="https://mangodoc.oss-cn-beijing.aliyuncs.com/geek8geeks/HTML_%7C_DOM_Input_Color_Object_2.jpg"/><br/><strong>点击按钮后：</strong> <br/><img alt="颜色对象" class="img-fluid" src="https://mangodoc.oss-cn-beijing.aliyuncs.com/geek8geeks/HTML_%7C_DOM_Input_Color_Object_3.jpg"/></p> <p><strong>支持的浏览器：</strong> <em>DOM Input Color Object 属性</em>支持的浏览器如下：</p> <ul> <li>谷歌浏览器</li> <li>IE浏览器</li> <li>火狐</li> <li>苹果浏览器</li> <li>歌剧</li> </ul> <p><strong>注意：</strong> Internet Explorer 11.0 及更早版本或 Safari 9.1 及更早版本不支持此功能。 </p> <div class="_ap_apex_ad" id="82d2079a-8120-480f-9fc7-5cda825d56e7" style="min-height:280px"></div> <p></p></div> </article> </div> </div> </div> </div> </div> <footer> <div class="bg-white text-center pb-1"> <p class="text-body-tertiary pt-3 lh-lg text-opacity-50" id="footer-text">Copyright © 2020 - 2024 版权所有 <br> <a href="https://beian.miit.gov.cn/" target="_blank" class="text-opacity-50 text-body-tertiary mt-1 mb-1">蜀ICP备20006366号-1</a> <br> Made with ❤️ in Chengdu </p> </div> </footer> <!-- 引入Bootstrap JavaScript库 --> <script src="https://unpkg.com/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script> <!-- 引入Meilisearch搜索相关的JavaScript库 --> <script src="https://cdn.jsdelivr.net/npm/@meilisearch/instant-meilisearch/dist/instant-meilisearch.umd.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4"></script> <script src="https://imangodoc.com/static/javascript/meili_custom.js"></script> <!-- 引入prismjs代码高亮相关的JavaScript库 --> <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-core.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/toolbar/prism-toolbar.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script> </body> </html>