<!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内置函数：get()

    文章转载于:https://www.cnblogs.com/wushuaishuai/p/7738118.html(博主:IT技术随笔) 描述 Python 字典 get() 方法和 setdefau ...

  2. java代码----方法类练习中~~~未领会

    总结:今天我很失败,问了老师继承的问题还是没弄懂.因为,技术宅的能力,我好怕啊.太强了. package com.da.ima2; public class yut {// 使用substring方法 ...

  3. 2018年长沙理工大学第十三届程序设计竞赛 J杯子

    链接:https://www.nowcoder.com/acm/contest/96/J来源:牛客网 杯子 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 32768K,其他语言655 ...

  4. 关于64位操作系统使用C#访问注册表失败的问题

    通过C#的注册表类 Registry.GetValue 进行访问时,其返回值一直为空.然后认真检查检查再检查了注册表路径,发现路径没有一点问题,不说废话,上代码: if (Registry.GetVa ...

  5. 想开发VR游戏？你需要注意这些东西

    转自:http://www.gamelook.com.cn/2016/03/246620 开发VR游戏很难吗?有些人会说是,但在HTC虚拟现实新科技部门副总经理鲍永哲看来,VR游戏的门槛并不比一般的游 ...

  6. List转Datable（需区分对象充当List成员和数组充当List成员两种情况）

    对象充当List成员时: /// <summary> /// 将泛类型集合List类转换成DataTable /// </summary> /// <param name ...

  7. 管理linked break-off snapshot

    1. 建立linked break-off snapshot   (1) 建立原卷 #> vxassist -g APS2_AFC_DG make vol1 4096000 #> vxpr ...

  8. java定时器控制时间打印

    public class test2 { public static void main(String []args){ Timer timer=new Timer(); timer.schedule ...

  9. JAVA基础知识总结8（设计模式）

    设计模式:JAVA中有23种设计模式 1.解决问题最行之有效的思想. 2.是一套被反复使用.多数人知晓的.经过分类编目的.代码设计经验的总结. 3.使用设计模式是为了可重用代码.让代码更容易被他人理解 ...

  10. 巧用cssText属性

    给一个HTML元素设置css属性,如 1 2 3 4 var head= document.getElementById("head"); head.style.width = & ...