javascript操作css

lijunabc

浏览: 47296 次
性别:
来自: 北京

最近访客更多访客>>

linziyuu

wu1239

Candysarah

scut2006

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

CSS JavaScript HTML

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