颜色选择器代码

发布于 2024-12-10 16:59:45 字数 1958 浏览 0 评论 0原文

我有这段代码来更改 div 内元素的颜色，例如背景颜色、文本颜色、活动链接颜色、访问的链接颜色等。我必须在文本框中输入每个颜色，因此背景颜色、文本颜色、链接颜色都会改变。这就是该计划的目标。但我无法更改活动、关注和访问的链接的颜色。如何仅使用 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>

原文

I have this code to change the color of elements like the Background-color,text color,active link color,visited link color etc. inside a div. I have to enter the color for each in the text-boxes and accordingly the color of background,text color,link colors would change. This is the program objective.
But I can't change the colors of the active, followed and visited links. How to do that with only HTML, CSS and JavaScript? Please don't tell me any method using jQuery, as I don't know jQuery. I only want it it with 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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

嘿看小鸭子会跑 2024-12-17 16:59:45

我通过将 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>

I Updated your code by assigning the ID's to the elements. Here is the updated code. Try this code to see if it helps. Thanks.

<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>

回复收藏 0 原文

~没有更多了~