颜色选择器代码

我有这个代码来改变元素的颜色，如背景颜色，文本颜色，活动链接颜色，访问过的链接颜色等。我必须在文本框中输入每种颜色，因此背景颜色，文本颜色，链接颜色都会发生变化。这是计划目标。但我无法更改活动的，随后的和已访问的链接的颜色。如何只使用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">&nbsp;hello 
      This is a Test<br/> 
      You Have Selected These Colors<br/> 
      <a href="#">This is a Test Link</a><br/> 
     </div> 
</body> 
</html>

来源

2011-10-17 raaz

可能重复http://stackoverflow.com/questions/311052/setting-css-pseudo-class-rules-from-javascript – Nasreddine

没有我的问题是有点不同 – raaz

究竟是怎么它不同？ – itzy

我通过将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">&nbsp; 
     <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>

来源

2014-10-12 15:56:03 user3347568

颜色选择器代码

回答

相关问题