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 相关文章推荐
基于JavaScript 下namespace 功能的简单分析
Jul 05 Javascript
JS 有趣的eval优化输入验证实例代码
Sep 22 Javascript
Jquery取得iframe下内容的方法
Nov 18 Javascript
javascript删除数组重复元素的方法汇总
Jun 24 Javascript
详解JavaScript中的属性和特性
Dec 08 Javascript
javascript实现根据函数名称字符串动态执行函数的方法示例
Dec 28 Javascript
Javascript设计模式之装饰者模式详解篇
Jan 17 Javascript
详解AngularJS ng-class样式切换
Jun 27 Javascript
webuploader分片上传的实现代码(前后端分离)
Sep 10 Javascript
nuxt 自定义 auth 中间件实现令牌的持久化操作
Nov 05 Javascript
Vue项目如何引入bootstrap、elementUI、echarts
Nov 26 Vue.js
如何在 Vue 表单中处理图片
Jan 26 Vue.js
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
十大催泪虐心动漫,你能坚持看到第几部?
2020/03/04 日漫
php输出表格的实现代码(修正版)
2010/12/29 PHP
PHP获取短链接跳转后的真实地址和响应头信息的方法
2014/07/25 PHP
PHP基于imap获取邮件实例
2014/11/11 PHP
php批量删除操作(数据访问)
2017/05/23 PHP
thinkphp5.1框架中容器(Container)和门面(Facade)的实现方法分析
2019/08/05 PHP
解决php用mysql方式连接数据库出现Deprecated报错问题
2019/12/25 PHP
实现复选框全选/全不选切换
2006/12/23 Javascript
JQuery实现自定义对话框的代码
2008/06/15 Javascript
Array, Array Constructor, for in loop, typeof, instanceOf
2011/09/13 Javascript
js实现的折叠导航示例
2013/11/29 Javascript
如何制作幻灯片(代码分享)
2017/01/06 Javascript
Angular.JS中的this指向详解
2017/05/17 Javascript
利用Vue实现移动端图片轮播组件的方法实例
2017/08/23 Javascript
详解JSONObject和JSONArray区别及基本用法
2017/10/25 Javascript
详解Vue + Vuex 如何使用 vm.$nextTick
2017/11/20 Javascript
JS控制鼠标拒绝点击某一按钮的实例
2017/12/29 Javascript
vue axios 简单封装以及思考
2018/10/09 Javascript
Nodejs libuv运行原理详解
2019/08/21 NodeJs
Vue与React的区别和优势对比
2020/12/18 Vue.js
浅谈django model postgres的json字段编码问题
2018/01/05 Python
Pandas中把dataframe转成array的方法
2018/04/13 Python
python对html过滤处理的方法
2018/10/21 Python
Python+OpenCV感兴趣区域ROI提取方法
2019/01/10 Python
在Pycharm中修改文件默认打开方式的方法
2019/01/17 Python
python itchat实现调用微信接口的第三方模块方法
2019/06/11 Python
深入理解Tensorflow中的masking和padding
2020/02/24 Python
解决pycharm debug时界面下方不出现step等按钮及变量值的问题
2020/06/09 Python
Raleigh兰令自行车美国官网:英国凤头牌自行车
2018/01/08 全球购物
【魔兽争霸3重制版】原版画面与淬火MOD画面对比
2021/03/26 魔兽争霸
创业融资计划书
2014/04/25 职场文书
给校长的建议书200字
2014/05/16 职场文书
本科生自荐信
2014/06/18 职场文书
2015年度酒店客房部工作总结
2015/05/25 职场文书
毕业论文答辩演讲稿
2015/06/23 职场文书
教你使用Jenkins集成Harbor自动发布镜像
2022/04/03 Servers