动态改变文字颜色和尺寸代码,Js代码库,德仔网

代码语言

代码分类

【Js】动态改变文字颜色和尺寸

作者:擎宇 / 发布于2016/7/11/ 620

<html>
    <head>
        <title>动态改变文字颜色尺寸</title>
        <style type="text/css">
            body{
                background-color:#cccccc;   
                font-family:Arial, Helvetica, sans-serif;
                font-size:13px;
            }
            span{
                font-family:黑体;
                font-weight:bold;
                font-size:30px;
                color:#006633;
            }
        </style>
        <script language="javascript">
            function ChangeColor(){
                var red = document.myform.red.value;
                var green = document.myform.green.value;
                var blue = document.myform.blue.value;
                var obj = document.getElementById("text");
                obj.style.color="#"+red+green+blue;
            }
            function ChangeSize(){
                var sizes=document.myform.sizes.value;
                var i;
                for(i=0;i<6;i++)
                {
                    if(document.myform.RadioButtons[i].checked)
                        break;
                }
                var obj = document.getElementById("text");
                switch(i)
                {
                    case 0:
                        obj.style.fontSize = sizes+"in";
                        break;
                    case 1:
                        obj.style.fontSize=sizes+"cm";
                        break;
                    case 2:
                        obj.style.fontSize=sizes+"mm";
                        break;
                    case 3:
                        obj.style.fontSize=sizes+"pt";
                        break;
                    case 4:
                        obj.style.fontSize=sizes+"pc";
                        break;
                    case 5:
                        obj.style.fontSize=sizes+"px";
                        break;
                    default:
                        break;
                }
            }
        </script>
    </head>
    <body>
        <center>
            <h1>动态改变文字颜色尺寸</h1>
            <hr>
            <form name="myform">
                <h2>颜色设置</h2>
                R:<input name="red" maxlength="2">
                G:<input name="green" maxlength="2">
                B:<input name="blue" maxlength="2">
                  
                <input type="button" onClick="ChangeColor()" value="改变颜色">
                <hr>
                <h2>尺寸设置</h2>
                Size:
                <input name="sizes">
                单位：
                <input type=radio name=RadioButtons>in&nbsp
                <input type=radio name=RadioButtons>cm&nbsp
                <input type=radio name=RadioButtons>mm&nbsp
                <input type=radio name=RadioButtons>pt&nbsp
                <input type=radio name=RadioButtons>pc&nbsp
                <input type=radio name=RadioButtons>px&nbsp
                
                <input type="button" onClick="ChangeSize()" value="改变尺寸">
            </form>
            <hr>
            <span id="text">CSS样式文字</span>
        </center>
    </body>
</html>

评论列表

本站所提供的代码，版权归原作者所有，若有侵犯作者版权，请与我们联系，我们将立即删除或修改。谢谢!
本站所有代码发布及提供者。

试试其它关键字

　文字颜色　

同语言下

可能有用的

擎宇贡献的其它代码(8)