vscode如何实现字体颜色的变化

    <html>

        <head>

         <title>

             文字变换颜色 样式

              </title>

        </head>

        <script>

        function changeColor()

        {  

            var title = document.getElementById("title").value;

            var select = document.getElementById("selector").value;

            if(select=="two")

                {      

                    document.getElementById("title").style.color="green";

                    }  

                    else document.getElementById("title").style.color="red";

                }

                function changeStyle()

                    {  

                        var title = document.getElementById("title").value;

                            var select = document.getElementById("selector2").value;

                            if(select=="two")  

                            {      

                                document.getElementById("title").style.fontFamily="Times New Roman";    

                            }  

                             else    

                                document.getElementById("title").style.fontFamily="楷体";

                            }

                                </script>

                                <body>

                                        <form name="form1">

                            <input type="text" name="title" id="title" value="黑色头发" style="font-family:Helvetica;">

                                       

                        <select name="selector" id="selector" οnchange="changeColor()">

                            <option value="one">

                            红色

                        </option>  

                            <option value="two">

                                绿色

                             </option>

                            </select>  

                        <select name="selector2" id="selector2" οnchange="changeStyle()">  

                            <option value="one">

                                宋体

                        </option>      

                        <option value="two">

                            楷体

                             </option>

                            </select>  

                        </form>

                        </body>

                        </html>

结果展示截图:

 

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Werfgf

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值