CSS动态改变样式

最新推荐文章于 2024-07-02 09:46:48 发布

zgqtxwd

最新推荐文章于 2024-07-02 09:46:48 发布

阅读量601

点赞数

分类专栏： css 文章标签： css class javascript html 文档

css 专栏收录该内容

486 篇文章

订阅专栏

　　 CSS与JavaScript结合起来产生的特效，进一步领略到 CSS的强大功能。

　　动态改变样式

　　我们先来看一个较简单的特效，这里只是用到了属性和鼠标事件。

　　我们使用“class”类属性来改变文档的样式。放大这段文本。

　　这个例子的代码是这样的：

<html>
　　<head>
　　<title>change style</title>
　　<style>
　　
　　</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>