颜色选择器代码
问题描述：
我有这个代码来改变元素的颜色，如背景颜色，文本颜色，活动链接颜色，访问过的链接颜色等。我必须在文本框中输入每种颜色，因此背景颜色，文本颜色，链接颜色都会发生变化。这是计划目标。 但我无法更改活动的，随后的和已访问的链接的颜色。如何只使用HTML，CSS和JavaScript？请不要告诉我任何使用jQuery的方法，因为我不知道jQuery。我只想用JavaScript来制作它。颜色选择器代码
<html>
<head>
</head>
<body>
<script>
function fun()
{
var bg=document.getElementById("t1").value;
var txt=document.getElementById("t2").value;
var al=document.getElementById("t3").value;
var vl=document.getElementById("t4").value;
var hv=document.getElementById("t5").value;
document.getElementById("dv").style.backgroundColor=bg;
document.getElementById("dv").style.alinkcolor=txt;
document.getElementById("dv").style.vlinkcolor=al;
document.getElementById("dv").style.color=vl;
document.getElementById("dv").style.color=hv;
}
</script>
<h1>Enter Colors: </h1>
Background: <input type="text" id="t1" name="txt1">
<br/><br/>
Text: <input type="text" id="t2" name="txt2">
<br/><br/>
Link: <input type="text" id="t3" name="link">
<br/><br/>
Active Link: <input type="text" id="t4" name="alink">
<br/><br/>
Followed Link: <input type="text" id="t5" name="vlink">
<br/><br/>
<input type="button" value="test" onclick="fun();">
<br/><br/>
<div id="dv"> hello
This is a Test<br/>
You Have Selected These Colors<br/>
<a href="#">This is a Test Link</a><br/>
</div>
</body>
</html>
答
我通过将ID分配给元素来更新您的代码。这是更新的代码。试试这个代码，看看它是否有帮助。谢谢。
<html>
<head>
</head>
<body>
<script>
function fun()
{
var bg=document.getElementById("t1").value;
var txt=document.getElementById("t2").value;
var al=document.getElementById("t3").value;
var vl=document.getElementById("t4").value;
var hv=document.getElementById("t5").value;
document.getElementById("dv").style.backgroundColor=bg;
document.getElementById("link").style.alinkcolor=al;
document.getElementById("link").style.vlinkcolor=vl;
document.getElementById("para").style.color=txt;
document.getElementById("link").style.color=hv;
}
</script>
<h1>Enter Colors: </h1>
Background: <input type="text" id="t1" name="txt1">
<br/><br/>
Text: <input type="text" id="t2" name="txt2">
<br/><br/>
Link: <input type="text" id="t3" name="link">
<br/><br/>
Active Link: <input type="text" id="t4" name="alink">
<br/><br/>
Followed Link: <input type="text" id="t5" name="vlink">
<br/><br/>
<input type="button" value="test" onclick="fun();">
<br/><br/>
<div id="dv">
<p id="para">hello This is a Test<br/>
You Have Selected These Colors<br/><p>
<a id="link" href="#">This is a Test Link</a><br/>
</div>
可能重复http://stackoverflow.com/questions/311052/setting-css-pseudo-class-rules-from-javascript – Nasreddine
没有我的问题是有点不同 – raaz
究竟是怎么它不同？ – itzy