index.html:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS之DivColorChange</title>
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript" src="demo.js"></script>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div style="width:200px;height:200px;background:red;">
</div>
</body>
</html>

样式设置style.css:

.red {
color:red;
}
.green {
color:green;
}
.bg {
background-color:#ccc;
}
.size {
font-size:20px;
}

.js是jquery的脚本文件,作用是实现图片缓存和加载。(文件已经上传)

执行效果如图:

If reference to indicate the source:蔡都平

Javascript之改变盒子颜色的更多相关文章

  1. JavaScript:编程改变文本样式

    <!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" Content=&q ...

  2. [JS9] document's bgColor改变背景颜色

    <HTML> <HEAD> <TITLE>设置背景颜色</TITLE> </HEAD> <BODY> <CENTER> ...

  3. 怎么用js设置a标签点击链接改变当前颜色

    怎么用js设置a标签点击链接改变当前颜色 20 例如:多个a标签为白色,当点击其中一个a标签时改变那一个a标签的字体颜色为黄色,并且跳转到对应链接,当点击下一个a标签链接时,下一个为黄色,之前一个恢复 ...

  4. checkbox复选框和div click事件重叠,点击div后复选框也被选中,同时改变div颜色,否则则不选中

     checkbox复选框和div click事件重叠,点击div后复选框也被选中,同时改变div颜色,否则则不选中 <!DOCTYPE html> <html lang=" ...

  5. JavaScript动态改变表格单元格内容的方法

    本文实例讲述了JavaScript动态改变表格单元格内容的方法.分享给大家供大家参考.具体如下: JavaScript动态改变表格单元格的内容,下面的代码通过修改单元格的innerHTML来修改单元格 ...

  6. Android--ColorMatrix改变图片颜色

    前言 本篇博客讲解如何通过改变图片像素点RGB的值的方式,在Android中改变图片的颜色.在最后将以一个简单的Demo来作为演示. 本篇博客的主要内容: ColorMatrix 使用ColorMat ...

  7. OpenGL的glClearColor和glClear改变背景颜色

    OpenGL的glClearColor和glClear改变背景颜色 结合以下两个函数void glClearColor(GLclampf red,    GLclampf green, GLclamp ...

  8. dev grdicontrol 根据条件改变行颜色,字体颜色等

    dev grdicontrol 根据条件改变行背景   dev grdicontrol 根据条件改变字体颜色  dev grdicontrol 根据条件改变某个单元格背景 不用写代码  打开gridc ...

  9. WPF动态改变主题颜色

    原文:WPF动态改变主题颜色 国内的WPF技术先行者周银辉曾介绍过如何动态改变应用程序的主题样式,今天我们来介绍一种轻量级的改变界面风格的方式--动态改变主题色. 程序允许用户根据自己的喜好来对界面进 ...

随机推荐

  1. 【PYTHON】二维码生成

    二维码是什么? 二维码从一维码扩展而来,增加另一维具有可读性的条码,用黑白矩形图形表示二进制数据,被设备扫描后获取其中包含的信息,二维码的长度.宽度均记载着数据,二维码具有定位点和容错机制,即便没有辨 ...

  2. Python3.5.2官方文档学习备忘录

    网址:https://docs.python.org/3/ 虽然学习官方文档有些耗时,不过看最原版的还是感觉好一点,原汁原味没有曲解没有省略. 从命令行向Python传递参数,运行:python - ...

  3. 赵雅智_ContentProvider

    ContentProvider介绍 ContentProvider是不同应用程序之间进行交换数据的标志API 也就是说:一个应用程序通过ContentProvider暴露自己的数据操作接口,那么无论该 ...

  4. flash的dragonbone插件导入cocos2d的注意事项

    一:Flash版本号应该为CS 6.0,低版本号不提供支持 二:新建flash项目的时候应该选择ActionScript3.0 三:动画中仅仅有两种元素,一个是"元件",还有一个是 ...

  5. C#实现汉字转换为拼音缩写的代码

    using System; using System.Configuration; using System.Data; using System.Web; using System.Web.Secu ...

  6. MySQL · 特性分析 · innodb 锁分裂继承与迁移

    http://mysql.taobao.org/monthly/2016/06/01/ innodb行锁简介 行锁类型 LOCK_S:共享锁 LOCK_X: 排他锁 GAP类型 LOCK_GAP:只锁 ...

  7. DataPackage-数据库、表的区域设置和系统不一致导致处理失败

    问题描述:       最近学习Datapackage,创建完之后,部署处理但总是提示某某字段的区域设置和目标字段的区域设置不一致,具体如图:             测试发现其它的数据库表又没有这类 ...

  8. C#_Fileuploadify_notMvc_description

    Uploadify Version 3.2 Options选项设置 auto 选择文件后自动上传 buttonClass 给“浏览按钮”加css的class样式 buttonCursor 鼠标移上去形 ...

  9. C#_ajax fileupload

    @{ ViewBag.Title = "Index"; Layout = null; } <h2>Index</h2> <script src=&qu ...

  10. VBoxGuestAdditions下载地址

    http://dlc.sun.com.edgesuite.net/virtualbox/