当前位置：Gxlcms > JavaScript > HTML颜色选择器实现代码

HTML颜色选择器实现代码

时间：2021-07-01 10:21:17 帮助过：145人阅读

<p>HTML颜色选择器</p> 
<p>范围：#000 - #FFF</p> 
<style><!-- 
.divColor div 
{ 
float:left; 
width:5px; 
height:5px; 
line-height:0px; 
font-size:0px; 
cursor:pointer; 
}

.divColor span 
{ 
display:block; 
float:left; 
width:40px; 
height:20px; 
cursor:pointer; 
} 
.divColor .clear 
{ 
height:auto; 
width:auto; 
clear:both; 
font-size:0px; 
line-height:0px; 
} 
--></style> 
<p> 
<input id="txtColor" style="border: solid 10px black; padding: 2px;" onmouseover="selectColor(this);" type="text" /></p> 
 
<script type="text/javascript">// <![CDATA[ 
function selectColor(o) { 
o.style.backgroundColor = '#FFF'; 
o.style.border = 'solid 10px ' + (o.value == '' ? 'black' : o.value); 
}

function showColor(color) { 
document.getElementById('txtColor').style.border = 'solid 10px ' + color; 
}

function setColor(color) { 
var txtColor = document.getElementById('txtColor'); 
txtColor.value = color; 
txtColor.style.backgroundColor = color; 
txtColor.select(); 
txtColor.focus(); 
}

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

HTML颜色选择器实现代码

人气教程排行