使用选择/选项更改文本颜色
[英]Change text color with Select/Option
问题描述
我正在尝试使用Select对象更改文本颜色，尝试获取我选择的颜色并将其设置为文本。 我的脚本中注释了两个函数，它们都是我试图完成的函数，但是都失败了。 不要求完整的答案/代码，只是想知道出什么问题了。 这是代码，感谢您的宝贵时间：
<!DOCTYPE HTML>
<html>
<head>
<title>Hola Mundo Controles</title>
<meta name="author" content="José Del Valle Cordero"/>
<meta charset="utf-8" />
</head>
<body>
<div class="main">
<div class="subject" id="subject">
<span id="salute">¡Hello!</span>
</div>
<div id="control">
<div class="color_option">
Color:
<select name="color_list" id="colors" >
<option value="cl_option1" checked="checked">Red </option>
<option value="cl_option2">Blue </option>
<option value="cl_option3">Yellow </option>
<option value="cl_option4">Black </option>
</select>
</div>
</div>
</div>
<script type="text/javascript">
var item,cl;
var colorsMap = {
'cl_option1' : "red",
'cl_option2' : "blue",
'cl_option3' : "yellow",
'cl_option4' : "black"
};
/*colors.onchange=function() {
var salute = document.getElementById("salute");
var item = document.getElementById("colors").selectedIndex;
var color = colorsMap[item];
salute.style.color = color;
};*/
/*$('#colors').change(function(){
var salute = document.getElementById("salute");
item=$(this).val();
cl = colorsMap[item];
salute.style.color = cl;
});*/
</script>
</body>
4 个解决方案
解决方案1
1 2014-02-24 03:41:27
你近了 在<head>包含jQuery：
<script src="//code.jquery.com/jquery-latest.js"></script>
然后在您的JS中：
<script type="text/javascript">
var colorsMap = {
'cl_option1' : "red",
'cl_option2' : "blue",
'cl_option3' : "yellow",
'cl_option4' : "black"
};
$('#colors').change(function(){
$("#salute").css('color', colorsMap[$(this).val()]);
});
</script>
原始脚本太笨拙，无法混合使用非jQuery和jQuery函数。
解决方案2
1 2014-02-24 03:46:33
除了页面中缺少jQuery外，我看到的最大问题是您的js立即被执行。 您的两次尝试都使用js与这些html节点所在的DOM进行通信，但是，当您的脚本运行时，DOM可能不准备使用那些节点。
jQuery提供了一种方法，只需一行就可以完成此操作。 如果您想学习本机js（我强烈推荐），则需要阅读有关何时窗口准备就绪的内容。
解决方案3
1 2014-02-24 03:46:47
要回答您的问题：
第一个代码块（非jQuery）将selectIndex用作select元素，该元素返回所选项目的数值（索引值）。 您希望字符串值对照您的颜色映射进行检查。 更新代码，使其看起来像：
var colors = document.getElementById('colors');
colors.onchange=function(){
var salute = document.getElementById("salute");
var item = document.getElementById("colors").value;
var color = colorsMap[item];
salute.style.color = color;
}
将工作。
更新的小提琴： http : //jsfiddle.net/pH4wW/2/
第二个，您只需要jQuery :)
解决方案4
0 已采纳 2014-02-24 03:46:49
代码中有太多事情需要更改。
如果您正在使用js
colors.onchange=function(){
var salute = document.getElementById("salute");
var item = document.getElementById("colors").selectedIndex;
var color = colorsMap[item];
salute.style.color = color;
};
必须更改为
document.getElementById("colors").onchange=function(){
var salute = document.getElementById("salute");
var item = document.getElementById("colors").value;
var color = colorsMap[item];
document.getElementById("salute").style.color = color;
};
您必须使用document.getElementById附加onchange事件
如果jQuery
$('#colors').change(function(){
var salute = document.getElementById("salute");
item=$(this).val();
cl = colorsMap[item];
$('#salute').css('color', cl);
});
另外，您缺少jquery库。
使用选择选项从画布更改文本颜色
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.