css实现动态改变样式的代码

发布时间:2019-10-17编辑:脚本学堂
如果您想实现动态网页,方案有很多,其中通过CSS来动态改变界面样式是最常见的,具体方法请看本文中的实例。

 

复制代码 代码示例:

    <html>
   <head>
   <title>change style</title>
   <style>
   <!--
   .bigchange{color:blue;font-weight:bolder;font-size:225%;
   letter-spacing:4px;background:yellow;}
   //*定义bigchange类的字体的颜色、粗细、大小,字间距,背景色*//
   .start{color:yellow;background:navy;}
   //*定义start类的字体的颜色和背景色*//
   -->
   </style>
   </head>
   <body>
   <h1>动态改变样式</h1>
   <p>请把鼠标移到蓝色背景的文字下面。</p>
   <p>我们使用"class"类属性来改变文档的样式。
   <span onmouseover="this.className='bigchange'"
   onmouseout="this.classname='start'" class="start"
         style="cursor:hand">
   放大这段文本。 </span> </p> </body>
   //*定义鼠标触发事件,当鼠标放上去的时候,区域内以bigchange类的格式显示,
   当鼠标离开的时候,以start类显示*//
   </html>