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


Posted in Javascript onMay 18, 2015

本文实例讲述了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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jquery css方法</title>
<style type="text/css">
div{width:100px;margin:0px auto;border:1px solid red;}
</style>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
  $("#btnChangeCss").click(function () {
    var $divs = $("div"); //返回JQuery对象,包含两个div元素
    //----举例1
    //alert("Div 的 Border样式:" + $divs.css("border-color"));
    //读取css样式
    //----举例2
    //$divs.css("backgroundColor", "#ccff66");
    //设置两个div元素的背景颜色
    //----举例3  链式设置三个个css属性
    $divs.css("width","500px").css("background-color", "#ffff00").css("font-size", "88px");
  });
});
</script>
</head>
<body>
<input id="btnChangeCss" type="button" value="改变样式" />
<div id="div1">我是div1</div>
<div id="div2">我是div2</div>
</body>
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
5 cool javascript apps
Mar 24 Javascript
ext for eclipse插件安装方法
Apr 27 Javascript
两个比较有用的Javascript工具函数代码
Feb 17 Javascript
网页打开自动最大化的js代码
Aug 22 Javascript
从零开始学习Node.js系列教程二:文本提交与显示方法
Apr 13 Javascript
ES6学习之变量的两种命名方法示例
Jul 18 Javascript
React根据宽度自适应高度的示例代码
Oct 11 Javascript
javascript回调函数详解
Feb 06 Javascript
解决vue单页面应用中动态修改title问题
Jun 09 Javascript
js实现盒子拖拽动画效果
Aug 09 Javascript
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
Aug 11 Javascript
javascript实现点击按钮切换轮播图功能
Sep 23 Javascript
Jquery使用val方法读写value值
May 18 #Javascript
JQuery中Text方法用法实例分析
May 18 #Javascript
JQuery中attr方法和removeAttr方法用法实例
May 18 #Javascript
JQuery中节点遍历方法实例
May 18 #Javascript
Jquery实现动态切换图片的方法
May 18 #Javascript
JQuery中基础过滤选择器用法实例分析
May 18 #Javascript
JQuery使用index方法获取Jquery对象数组下标的方法
May 18 #Javascript
You might like
php中邮箱地址正则表达式实现与详解
2012/04/24 PHP
个人写的PHP验证码生成类分享
2014/08/21 PHP
百度地图经纬度转换到腾讯地图/Google 对应的经纬度
2015/08/28 PHP
总结PHP代码规范、流程规范、git规范
2018/06/18 PHP
JS 添加网页桌面快捷方式的代码详细整理
2012/12/27 Javascript
JQuery标签页效果的两个实例讲解(4)
2015/09/17 Javascript
js日期插件dateHelp获取本月、三个月、今年的日期
2016/03/07 Javascript
jqGrid用法汇总(全经典)
2016/06/28 Javascript
javascript实现无法关闭的弹框
2016/11/27 Javascript
详解Angular 4.x NgIf 的用法
2017/05/22 Javascript
Vue.js 中的 v-model 指令及绑定表单元素的方法
2018/12/03 Javascript
基于element-ui组件手动实现单选和上传功能
2018/12/06 Javascript
Vue.js结合bootstrap前端实现分页和排序效果
2018/12/29 Javascript
Vue 引入AMap高德地图的实现代码
2019/04/29 Javascript
基于Vue实现微前端的示例代码
2020/04/24 Javascript
单线程JavaScript实现异步过程详解
2020/05/19 Javascript
[02:43]DOTA2英雄基础教程 半人马战行者
2014/01/13 DOTA
[01:33]DOTA2上海特级锦标赛 LIQUID战队完整宣传片
2016/03/16 DOTA
详解Python中映射类型的内建函数和工厂函数
2015/08/19 Python
Python SQLite3数据库日期与时间常见函数用法分析
2017/08/14 Python
python创建学生管理系统
2019/11/22 Python
Python持续监听文件变化代码实例
2020/07/22 Python
英格兰橄榄球商店:England Rugby Store
2016/12/17 全球购物
Vector, ArrayList, HashTable, HashMap哪些是线程安全的,哪些不是
2015/10/12 面试题
Laravel的加密解密与哈希实例讲解
2021/03/24 PHP
幼师专业毕业生自荐信
2013/09/29 职场文书
集团薪酬管理制度
2014/01/13 职场文书
应届毕业生求职信范文
2014/05/08 职场文书
在校实习生求职信
2014/06/18 职场文书
详细的本科生职业生涯规划范文
2014/09/16 职场文书
公司财务会计主管应聘求职信
2014/09/26 职场文书
联谊会开场白
2015/06/01 职场文书
党支部综合考察意见
2015/06/01 职场文书
2016年端午节红领巾广播稿
2015/12/18 职场文书
2016党员发展对象培训心得体会
2016/01/08 职场文书
学校教代会开幕词
2016/03/04 职场文书