CSS动态改变样式

css|动态

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

  动态改变样式

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

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

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

  <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
   class="start"
        style="cursor:hand">
  放大这段文本。 </span> </p> </body>
  //*定义鼠标触发事件,当鼠标放上去的时候,区域内以bigchange类的格式显示,
  当鼠标离开的时候,以start类显示*//
  </html>

  这个例子很简单,容易理解,就不多说什么了。

<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>   <span    class="start"         style="cursor:hand">  放大这段文本。 </span> </p> </body>  </html>

    [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

时间: 2025-01-21 06:00:32

CSS动态改变样式的相关文章

jQuery文本框得到与失去焦点动态改变样式效果_jquery

本文实例讲述了jQuery文本框得到与失去焦点动态改变样式效果.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> body { font: nor

Jquery使用css方法改变样式实例

  本文实例讲述了Jquery使用css方法改变样式.分享给大家供大家参考.具体实现方法如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtm

Jquery使用css方法改变样式实例_jquery

本文实例讲述了Jquery使用css方法改变样式.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &

如何在网页中动态改变样式

动态|网页 要实现动态网页,方案有很多,其中通过CSS来动态改变界面样式是网页设计者最喜欢使用的技术. 在使用CSS样式动态改变界面样式中,大家通常是定义多个CLASS样式对象,然后在JAVASCRIPT(或VBSCRIPT)脚本中设置对象的class属性为某一个指定的样式Class名或直接修改对象的STYLE属性实现.这些方法在修改少量有限的样式时是非常有效的,但如果要对整个页面的元素对象的样式进行变动时,便会感到非常的麻烦了. 这里提供一个通过动态加载CSS样式文件来实现界面样式动态修改的方

JavaScript修改css样式style动态改变元素样式

 修改css样式style在某些情况下还是比较实用的,可以动态改变一些样式,接下来为大家介绍下使用JavaScript是如何做到的 一.局部改变样式  分为改变直接样式,改变className和改变cssText三种.需要注意的是:  注意大小写:  javascript对大小写十分敏感,className不能够把"N"写成"n",cssText也不能够把"T"写成"t",否则无法实现效果.  调用方法:  如果改变class

JavaScript修改css样式style动态改变元素样式_javascript技巧

一.局部改变样式 分为改变直接样式,改变className和改变cssText三种.需要注意的是: 注意大小写: javascript对大小写十分敏感,className不能够把"N"写成"n",cssText也不能够把"T"写成"t",否则无法实现效果. 调用方法: 如果改变className,则事先在样式表中申明类,但调用时不要再跟style,像document.getElementById('obj').style.cl

求动态改变网站样式源码 或者思路也可以。。。

问题描述 求动态改变网站样式源码 或者思路也可以... 通过下拉列表可以改变网站样式,每个用户的样式是自己的. 第一次登陆进去是默认样式,用户设置自己的样式之后,第二次登陆是用户自己的样式, 求源码或思路. 关键有很多个页面,这个页面设置好,那怎么保证下个页面还是这个样式呢? 解决方案 把用户的样式保存到数据库. 登陆之后在session里保存样式. 这样跳转不同的页面都是同一个session,自然就可以指定同一个样式

动态的样式表lesscss:简单学习lesscss语法

文章简介:lesscss 是动态的样式表语言,他让css增加变量,组合,函数,运算等语法.这个项目的网站在国内访问不到,大家都懂的. lesscss 是动态的样式表语言,他让css增加变量,组合,函数,运算等语法.这个项目的网站在国内访问不到,大家都懂的. lesscss使用方法有两种: 1.页面添加一个 less.js的文件,css使用 style.less 文件后缀来编写,不过需要有服务器的环境支持 <link rel="stylesheet/less" type="

Ajax Hack 之hack 11 动态产生样式

ajax|动态 Ajax Hack 之hack 11 动态产生样式 为web内容动态定义和制定CSS样式. JavaScript和DOM编程允许用户定义CSS样式属性,并应用于页面元素.一个典型的例子是一个wiki页面允许用户设计自己页面的方案和样式. 通常情况下,比较好的方法是将样式定义从JavaScript代码中分离出来.这样的习惯可以使元素独立扩展,降低web页面元素的复杂性,使之更高效. 本hack和上一个相似,根据用户选择的样式,动态显示服务器信息.和前一个不同之处就是:这里是在代码里