给定一个 16 进制颜色字符串 hexCode, 如何使用 JavaScript 检查 hexCode 是否是有效的十六进制颜色表示? 下面本篇文章就来给大家介绍检查字符串是否是有效的十六进制颜色表示的方法, 希望对大家有所帮助.
有效的十六进制颜色表示代码包含字母 (AF) 和整数(0-9), 长度为 3 或 6; 我们通过正则表达式检查十六进制代码的有效性.
示例 1:
- <!DOCTYPE html>
- <head>
- <meta charset="UTF-8">
- </head>
- <body>
- <p id="UP" style="font-size: 19px; font-weight: bold;"></p>
- <button onclick="GFG_Fun()">检查</button>
- <p id="DOWN" style="font-size: 24px; font-weight: bold;"></p>
- <p id="demo"></p>
- <script>
- var el_up = document.getElementById("UP");
- var el_down = document.getElementById("DOWN");
- var el_demo = document.getElementById("demo");
- var colorCode = '#zabbcc';
- el_up.innerHTML = "指定的 16 进制颜色字符串:"+ colorCode;
- var RegExp = /^#[0-9A-F]{6}$/i;
- function GFG_Fun() {
- el_down.innerHTML = RegExp.test(colorCode)?"有效地 16 进制颜色":"无效地 16 进制颜色";
- el_demo.innerHTML="<span style='background-color:
"+colorCode+";'>测试文字! 查看背景颜色是否改变, 改变了即颜色值有效.</span>"
- }
- </script>
- </body>
- </HTML>
点击按钮:
示例 2:
- <!DOCTYPE HTML>
- <head>
- <meta charset="UTF-8">
- </head>
- <body>
- <p id="UP" style="font-size: 19px; font-weight: bold;"></p>
- <button onclick="GFG_Fun()">检查</button>
- <p id="DOWN" style="font-size: 24px; font-weight: bold;"></p>
- <p id="demo"></p>
- <script>
- var el_up = document.getElementById("UP");
- var el_down = document.getElementById("DOWN");
- var el_demo = document.getElementById("demo");
- var colorCode = '#aabbcc';
- el_up.innerHTML = "指定的 16 进制颜色字符串:"+ colorCode;
- var RegExp = /^#[0-9A-F]{6}$/i;
- function GFG_Fun() {
- el_down.innerHTML = RegExp.test(colorCode)?"有效地 16 进制颜色":"无效地 16 进制颜色";
- el_demo.innerHTML="<span style='background-color:
"+colorCode+";'>测试文字! 查看背景颜色是否改变, 改变了即颜色值有效.</span>"
- }
- </script>
- </body>
- </HTML>
点击按钮:
来源: http://www.css88.com/qa/javascript/10493.html