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 相关文章推荐
jQuery中jqGrid分页实现代码
Nov 04 Javascript
一行代码告别document.getElementById
Jun 01 Javascript
JavaScript String.replace函数参数实例说明
Jun 06 Javascript
javascript/jquery获取地址栏url参数的方法
Mar 05 Javascript
jQuery验证插件 Validate详解
Nov 20 Javascript
跟我学习JScript的Bug与内存管理
Nov 18 Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
Mar 01 Javascript
protractor的安装与基本使用教程
Jul 07 Javascript
AngularJS select加载数据选中默认值的方法
Feb 28 Javascript
vue 实现复制内容到粘贴板clipboard的方法
Mar 17 Javascript
纯javascript实现选择框的全选与反选功能
Apr 08 Javascript
vue实现购物车列表
Jun 30 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
实用函数10
2007/11/08 PHP
php 从一个数组中随机的取出若干个不同的数实例
2016/12/31 PHP
详解laravel安装使用Passport(Api认证)
2018/07/27 PHP
浅谈php://filter的妙用
2019/03/05 PHP
模拟select的代码
2011/10/19 Javascript
JavaScript高级程序设计(第3版)学习笔记13 ECMAScript5新特性
2012/10/11 Javascript
不到30行JS代码实现Excel表格的方法
2014/11/15 Javascript
javascript数组去重的六种方法汇总
2015/08/16 Javascript
由浅入深剖析Angular表单验证
2016/07/14 Javascript
JavaScript中ES6 Babel正确安装过程
2016/07/18 Javascript
js 转json格式的字符串为对象或数组(前后台)的方法
2016/11/02 Javascript
Javascript 引擎工作机制详解
2016/11/30 Javascript
jQuery实现字符串全部替换的方法
2016/12/12 Javascript
Angularjs实现搜索关键字高亮显示效果
2017/01/17 Javascript
AngularJS路由Ui-router模块用法示例
2017/05/29 Javascript
JS中使用textPath实现线条上的文字
2017/12/25 Javascript
在vue项目中,使用axios跨域处理
2018/03/07 Javascript
javascript验证form表单数据的案例详解
2019/03/25 Javascript
一些手写JavaScript常用的函数汇总
2019/04/16 Javascript
[55:35]DOTA2-DPC中国联赛 正赛 CDEC vs Dragon BO3 第二场 1月22日
2021/03/11 DOTA
详解Python中 sys.argv[]的用法简明解释
2017/12/20 Python
微信跳一跳python自动代码解读1.0
2018/01/12 Python
Python实现将数据写入netCDF4中的方法示例
2018/08/30 Python
Python设计模式之工厂方法模式实例详解
2019/01/18 Python
使用Python爬虫库requests发送表单数据和JSON数据
2020/01/25 Python
python list等分并从等分的子集中随机选取一个数
2020/11/16 Python
Gretna Green中文官网:苏格兰格林小镇
2019/10/16 全球购物
中专生自我鉴定
2013/12/17 职场文书
网络技术专业求职信
2014/05/02 职场文书
公司股份转让协议书范本
2015/01/28 职场文书
初中重阳节活动总结
2015/05/05 职场文书
银行反洗钱宣传活动总结
2015/05/08 职场文书
2015年车间主任工作总结
2015/05/21 职场文书
无违反计划生育证明格式
2015/06/24 职场文书
2015暑期工社会实践报告
2015/07/13 职场文书
施工安全责任协议书
2016/03/23 职场文书