<!doctype html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#change').click(function(){
$('p').css({"border-color":"#62D781","background-color":"#EAF7EE"});
$('#error').attr("src","img/success.jpg")
});
$('#close').click(function(){
$('p').hide();
});
});
</script>
<style type="text/css">
p {
border-style: solid;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-color: #F5A0A0;
background-color: #FCEEEE;
width:540px;
height: 30px;
line-height: 30px
}
#close{
float: right;
margin-top: 7px
}
#error{
float: left;
margin-top: 7px
}
</style>
</head>

<body>
<p>dfsfsd<img src="img/info.jpg" id="error"><img src="img/close.jpg" id="close"></p>
<button id="change">change border</button>
</body>
</html>

完整代码(包括图片和js文件)，到我的Github下载:https://github.com/joyang1/ChangeBorderColor

css边跨实例的更多相关文章

  1. 【转】精选30个优秀的CSS技术和实例

    今天,我为大家收集精选了30个使用纯CSS完成的强大实践的优秀CSS技术和实例,您将在这里发现很多与众不同的技术,比如:图片集.阴影效果.可扩展按钮.菜单等-这些实例都是使用纯CSS和HTML实现的. ...

  2. 精选30个优秀的CSS技术和实例

    精选30个优秀的CSS技术和实例   投递人 墙头草 发布于 2008-12-06 20:57 评论(97) 有17487人阅读 原文链接 [收藏] « » 今天,我为大家收集精选了30个使用纯CSS ...

  3. css技术和实例

    今天,我为大家收集精选了30个使用纯CSS完成的强大实践的优秀CSS技术和实例,您将在这里发现很多与众不同的技术,比如:图片集.阴影效果.可扩展按钮.菜单等-这些实例都是使用纯CSS和HTML实现的. ...

  4. 30个优秀的CSS技术和实例 By 彬Go 2008-12-04

    在这里可发现很多与众不同的技术,比如:图片集.阴影效果.可扩展按钮.菜单等…这些实例都是使用纯CSS和HTML实现的.单击每个实例的标题可以被转向到该技术实例的相关教程或说明页面(英文),单击每个实例 ...

  5. SQL ser 跨实例访问数据库

    SqlServer如何跨实例访问数据库 Exec sp_droplinkedsrvlogin LinkName,NullExec sp_dropserver LinkName go EXEC sp_a ...

  6. CSS 分类 (Classification) 实例

    CSS 分类 (Classification) 实例CSS 分类属性 (Classification)CSS 分类属性允许你控制如何显示元素,设置图像显示于另一元素中的何处,相对于其正常位置来定位元素 ...

  7. CSS 尺寸 (Dimension) 实例

    CSS 尺寸 (Dimension) 实例CSS 尺寸属性CSS 尺寸属性允许你控制元素的高度和宽度.同样,还允许你增加行间距. 属性 描述height 设置元素的高度.line-height 设置行 ...

  8. CSS 边框(border)实例

    CSS 边框(border)实例:元素的边框 (border) 是围绕元素内容和内边距的一条或多条线. CSS border 属性允许你规定元素边框的样式.宽度和颜色. CSS 边框属性属性 描述bo ...

  9. CSS 字体(font)实例

    CSS 字体(font)实例CSS 字体属性定义文本的字体系列.大小.加粗.风格(如斜体)和变形(如小型大写字母).CSS 字体系列在 CSS 中,有两种不同类型的字体系列名称: 通用字体系列 - 拥 ...

随机推荐

  1. python-xlrd 实现excel 导入数据

    首先安装 xlrd 两种方式: 1.wheel 方式 安装: 首先要下载 wheel :

  2. C Primer Plus学习笔记（三）- 字符串和格式化输入/输出

    从一个简单的例子开始 #include <stdio.h> int main() { char name[10]; printf("Input Your Name:\n" ...

  3. 第二章 深入分析Java I/O的工作机制（待续）

    Java的I/O类库的基本架构 磁盘I/O工作机制 网络I/O工作机制 NIO的工作方式 I/O调优 设计模式解析之适配器模式 设计模式解析之装饰器模式 适配器模式与装饰器模式的区别

  4. 解决springMVC文件上传报错： The current request is not a multipart request

    转自:https://blog.csdn.net/HaHa_Sir/article/details/79131607 解决springMVC文件上传报错: The current request is ...

  5. 反向索引（Inverted Index）

    转自:http://zhangyu8374.iteye.com/blog/86307 反向索引是一种索引结构,它存储了单词与单词自身在一个或多个文档中所在位置之间的映射.反向索引通常利用关联数组实现. ...

  6. JAVA反射机制学习随笔

    JAVA反射机制是用于在运行时动态的获取类的信息或者方法,属性,也可以用来动态的生成类,由于所有类都是CLASS的子类,我们可以用一个CLASS类的实例来实例化各种类 例如: Class<?&g ...

  7. Codeforces 1114D Flood Fill (区间DP or 最长公共子序列)

    题意:给你n个颜色块,颜色相同并且相邻的颜色块是互相连通的(连通块).你可以改变其中的某个颜色块的颜色,不过每次改变会把它所在的连通块的颜色也改变,问最少需要多少次操作,使得n个颜色块的颜色相同. 例 ...

  8. SQL 连贯操作 [1]

    一． 连贯入门 查找到 id 为 1,2,3,4 中按照创建时间的倒序的前两位. 在 Home/controller/UserController.class.php 下插入 1.连贯操作入门 $us ...

  9. CentOS7下安装pip和pip3

    1.首先检查linux有没有安装python-pip包,直接执行 yum install python-pip 2.没有python-pip包就执行命令 yum -y install epel-rel ...

  10. v8垃圾回收和js垃圾回收机制

    垃圾回收器是一把十足的双刃剑.好处是简化程序的内存管理,内存管理无需程序员来操作,由此也减少了长时间运转的程序的内存泄漏.然而无法预期的停顿,影响了交互体验.本文从 V8 (node.js runti ...