JavaScript网页核心Document对象应用-CSDN博客

本文链接：https://blog.csdn.net/Rison_Li/article/details/82961872

本文介绍了使用JavaScript进行网页颜色动态设置的方法，包括超链接、前景色和背景色的调整，以及如何捕获文本框内容的变化。通过代码示例展示了如何实现这些功能，适用于网页前端开发人员。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、超链接颜色设置

代码片段

<html>
    <body>
        <a id="1" href="https://blog.csdn.net/Rison_Li">我的博客</a>
        <script type="text/javascript">
            document.vlinkColor = "#ff8877"; //点击后颜色
            document.linkColor = "red";      //未点击颜色
            document.alinkColor = "green"; //获得焦点时颜色
        </script>
    </body>
</html>

结果显示：

2、前景色背景色设置

代码片段

<html>
    <body>
        体会前景色背景色变化
      <script type="text/javascript">
        var colors = new Array("#FFE4E1","#FF69B4","#E6E6FA","#CDC9C9","#98FB98","#1C86EE");
        var x = 0;
        function turncolors(){
            x++;
            if(x == (colors.length - 1)) x = 0;
            document.bgColor = colors[x];              //设置页面背景色
            document.fgColor = colors[x-1];            //设置文字颜色
            setTimeout("turncolors()",2000);
        }
        turncolors();
      </script> 
    </body>
</html>

结果显示：

3、获取文本框修改内容

代码片段

<html>
    <body>
        <input type="text" id="name" value="你的名字是？"/>
        <input type="button" value="揭晓" name="btn" onClick="myName();"/>
        <script language="javascript">
            function myName(){
                var name = document.getElementById("name");
                name.value = "你猜吧"
            }
        </script>
    </body>
</html>

结果显示：