javascript操作css

最新推荐文章于 2024-08-03 15:42:27 发布

lijunabc

最新推荐文章于 2024-08-03 15:42:27 发布

阅读量91

点赞数

文章标签： CSS JavaScript HTML ViewUI

本文链接：https://blog.csdn.net/lijunabc/article/details/83641059

版权

   <html><head><title>动态改变文字颜色 </title>
    <style type="text/css">
        body { background-color: pink;
               font-size: 22pt;
               font-weight: bold;
        }
        .red { color:rgb(255,0,0);
               font-style: italic;
               font-size: 32;
        }
        .blue { color:blue;
                font-size: 36;
        }
        .green { color: green;
                 font-size: 40;
        }
        .yellow { color: yellow;
                 font-size: 45;
        }
    </style>
    <script language="javascript">
        function init(){
            div1=document.getElementById("first");
            div2=document.getElementById("second");
            div3=document.getElementById("third");
            div4=document.getElementById("fourth");
        }
        function colorText(){
            div1.style.left = 50;
            div1.style.top = 50;
            div1.className="red";
            div2.style.left = 100;
            div2.style.top = 100;
            div2.className="blue";
            div3.style.left = 150;
            div3.style.top = 150;
            div3.className="green";
            div4.style.left = 200;
            div4.style.top = 200;
            div4.className="yellow";
        }
    </script>
    </head>
    <body onLoad="init()">
        <div id="first" style="position:absolute; top:50px">戌鼓断人行，秋边一雁声。</div>
        <div id="second" style="position:absolute; top:100px">露从今夜白，月是故乡明。</div>
        <div id="third" style="position:absolute; top:150px">有弟皆分散，无家问死生。</div>
        <div id="fourth" style="position:absolute; top:200px">有弟皆分散，无家问死生。</div>
    <form>
        <input type="button" value="移动文字位置并改变样色" onClick="colorText()">
    </form>
    </body>