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. nexus建立maven仓库私服及Snapshots、release的版本管理

    环境搭建   1.linux安装maven   wget http://mirrors.cnnic.cn/apache/maven/maven-3/3.0.5/binaries/apache-mave ...

  2. Codeforces Round #334 (Div. 2) A. Uncowed Forces 水题

    A. Uncowed Forces Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/604/pro ...

  3. 第一周：读取XML深度数据并将其重建为三维点云

    本周主要任务:学习PCL点云库,掌握利用PCL对点云处理的方法 任务时间:2014年9月1日-2014年9月7日 任务完成情况:完成了读取单幅xml深度数据,并重建三维点云并显示 任务涉及基本方法: ...

  4. 详谈 php定时器

    以前对se特别感兴趣,但是自己又不会java,lucene等搜索引擎开发工具,于是不断挖掘php的功效. 最后发现php也可以做抓取,并且原理很易:直接获取页面源文件,然后通过正则或字符串的参照截取来 ...

  5. [WebGL] Setting Up WebGL

    In this lesson we cover setting up WebGL for use, including creating a canvas, getting the WebGL ren ...

  6. as 中的反射

    flash.utils包中的getDefinitionByName,getQualifiedClassName,getQualifiedSuperclassName..可以当做反射用. 1.getDe ...

  7. unity工程接入Android sdk后真机测试解锁屏后退出的解决

    unity工程接入如91.移动支付等Android sdk后,真机运行尤其是在4.0+以上坏境,往往会出现解锁屏后退出的情况,解决办法如下: 可以在AndroidManifest.xml中所有的con ...

  8. 进程环境之getrlimit和setrlimit函数

    每个进程都有一组资源限制,其中一些可以用getrlimit和setrlimit函数查询和更改. #include <sys/resource.h> int getrlimit( int r ...

  9. LeetCode: Populating Next Right Pointer in Each Node

    LeetCode: Populating Next Right Pointer in Each Node Given a binary tree struct TreeLinkNode { TreeL ...

  10. cocos2d-x使用tinyxml2存储解析xml

    我用的是2.1.4的cocos2d-x,里面自带有tinyxml2库. 导入头文件:#include "support/tinyxml2/tinyxml2.h" using nam ...