-1 
<style type="text/css">
<!--
.border-rb {
cursor:pointer;
height:15px;
width:15px;
border-right: solid black 1px;
border-bottom: solid black 1px;
font-size:1px;
}
.border-lt {
border-top: 1px solid #000;
border-left: 1px solid #000;
}
.border-t {
border-top: 1px solid #000;
border-left: 1px none #000;
}
.div_color_preview {
background-color: #FFFFFF;
width: 50px;
height: 50px;
border: 1px solid #000;
}
.div_color_click {
background-color: #FFFFFF;
width: 50px;
height: 50px;
border: 1px solid #000;
}
-->
</style>
</head>
<body>
<table name="table1"><tr>
<td><%out.println(request.getAttribute("nam")); %>
</td></tr></table>
<input name="txtColor" type="text" id="txtColor" size="7">
<br>
<br>
<div id="div_color_text">Hex code</div>
<br>
<div id="div_color_preview" class="div_color_preview"></div>
<br>
<div id="div_color_click" class="div_color_click"></div>
<br>
<script type="text/javascript" language="javascript">
<!--
function col_preview(c) {
document.getElementById('div_color_preview').style.cssText='background-color: ' + c +';     width: 50px; 
height: 50px;  
border: 1px solid #000;';
document.getElementById('div_color_text').innerHTML  = c;
}
function col_exit(c) {
document.getElementById('div_color_preview').style.cssText = 'background-color:#FFFFFF;     width:        50px; 
height: 50px; 
border: 1px solid #000;';
document.getElementById('div_color_text').innerHTML  = "Hex code";
}
function col_click(c) {
document.getElementById('div_color_click').style.cssText = document.getElementById('div_color_preview').style.cssText;
document.getElementById('txtColor').value = c;
}

document.write('<table width="170" border="0" cellpadding="0" cellspacing="0"      style="background-color:black;" ><tr><td width="90"><table border="0" cellpadding="0"      cellspacing="0" class="border-lt" >');
var int_count_col1 = 6;
var int_count_col2 = 6;
var int_count = 0;
while (int_count != 36)
{
int_count = int_count + 1
if (int_count_col1 == 1) {str_count_col1 = "00"}
if (int_count_col1 == 2) {str_count_col1 = "33"}
if (int_count_col1 == 3) {str_count_col1 = "66"}
if (int_count_col1 == 4) {str_count_col1 = "99"}
if (int_count_col1 == 5) {str_count_col1 = "CC"}
if (int_count_col1 == 6) {str_count_col1 = "FF"}
if (int_count_col2 == 1) {str_count_col2 = "00"}
if (int_count_col2 == 2) {str_count_col2 = "33"}
if (int_count_col2 == 3) {str_count_col2 = "66"}
if (int_count_col2 == 4) {str_count_col2 = "99"}
if (int_count_col2 == 5) {str_count_col2 = "CC"}
if (int_count_col2 == 6) {str_count_col2 = "FF"}
document.write('<tr><td onMouseOver="col_preview(\'#FF' + str_count_col1 +   str_count_col2 + '\');" onClick="col_click(\'#FF' + str_count_col1 + str_count_col2 +   '\');" onMouseOut="col_exit();" bgcolor="#FF' + str_count_col1 + str_count_col2 + '"    class="border-rb">&nbsp;</td>' +
'<td onMouseOver="col_preview(\'#CC' + str_count_col1 + str_count_col2 + '\');"   onClick="col_click(\'#CC' + str_count_col1 + str_count_col2 + '\');"   onMouseOut="col_exit();" bgcolor="#CC' + str_count_col1 + str_count_col2 + '"   class="border-rb">&nbsp;</td>' +
'<td onMouseOver="col_preview(\'#99' + str_count_col1 + str_count_col2 + '\');"     onClick="col_click(\'#99' + str_count_col1 + str_count_col2 + '\');"     onMouseOut="col_exit();" bgcolor="#99' + str_count_col1 + str_count_col2 + '"     class="border-rb">&nbsp;</td>' +
'<td onMouseOver="col_preview(\'#66' + str_count_col1 + str_count_col2 + '\');"     onClick="col_click(\'#66' + str_count_col1 + str_count_col2 + '\');"     onMouseOut="col_exit();" bgcolor="#66' + str_count_col1 + str_count_col2 + '"     class="border-rb">&nbsp;</td>' +
'<td onMouseOver="col_preview(\'#33' + str_count_col1 + str_count_col2 + '\');" onClick="col_click(\'#33' + str_count_col1 + str_count_col2 + '\');" onMouseOut="col_exit();" bgcolor="#33' + str_count_col1 + str_count_col2 + '" class="border-rb">&nbsp;</td>' +
'<td onMouseOver="col_preview(\'#00' + str_count_col1 + str_count_col2 + '\');" onClick="col_click(\'#00' + str_count_col1 + str_count_col2 + '\');" onMouseOut="col_exit();" bgcolor="#00' + str_count_col1 + str_count_col2 + '" class="border-rb">&nbsp;</td></tr>');
if (int_count_col2 == 1){int_count_col1 = int_count_col1 - 1;int_count_col2 = 6;
}else{int_count_col2 = int_count_col2 - 1}
if (int_count == 18) {document.write('</table></td><td width="90"><table width="0%"     border="0" cellpadding="0" cellspacing="0" class="border-t">');}
if (int_count == 36) {document.write('</table></td></tr></table>');}
}
-->
</script>
<button name="submit" value="submit" type="submit" onclick="return checkbutton();">

上記のコードを使用してカラー ピッカーを作成しましたが、table1 の変数に格納されているテキスト ボックスからのテキストに色を適用する必要があります。

div_color_clickテーブル、つまりtable1に適用する必要があります

次の関数を使用して色を適用しましたが、機能していません

<script>
function checkbutton()
{
var color=document.getElementById("textcolor").value;
document.getElementById("table1").style.color=document.getElementById("textcolor").innerHTML;
document.getElementsByName("nam").style.color=document.getElementById("textcolor").innerHTML;
}
</script>
4

1 に答える 1

0 
<script>
function checkbutton() {
    var color = '#' + document.getElementById("txtColor").value;
    document.getElementById("table1").style.color = color;
    document.getElementsByName("nam").style.color = color;
}
</script>
于 2013-04-11T06:33:24.780 に答える