×

检查指定16进制颜色字符串是否有效

作者:andy0012020.01.17来源:Web前端之家浏览:583评论:0
关键词:js

有效的十六进制颜色表示代码包含字母(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>

温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
http://www.jiangweishan.com/article/jsudfd92834908230948.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2019 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.5.2 Zero