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 相关文章推荐
获取HTML DOM节点元素的方法的总结
Aug 21 Javascript
jQuery EasyUI API 中文文档 - Draggable 可拖拽
Sep 29 Javascript
删除javascript中注释语句的正则表达式
Jun 11 Javascript
Jquery树插件zTree实现菜单树
Jan 24 Javascript
js实现4个方向滚动的球
Mar 06 Javascript
详解AngularJs ui-router 路由的简单介绍
Apr 26 Javascript
jquery replace方法去空格
May 08 jQuery
原生JavaScript实现remove()和recover()功能示例
Jul 24 Javascript
详解js实时获取并显示当前时间的方法
May 10 Javascript
vue+element模态框中新增模态框和删除功能
Jun 11 Javascript
js原生map实现的方法总结
Jan 19 Javascript
在Vue中使用antv的示例代码
Jun 29 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中目录,文件操作详谈
2007/03/19 PHP
PHP中的函数-- foreach()的用法详解
2013/06/24 PHP
PHP中的socket_read和socket_recv区别详解
2015/02/09 PHP
YII框架页面缓存操作示例
2019/04/29 PHP
javascript(jquery)利用函数修改全局变量的代码
2009/11/02 Javascript
JavaScript获取页面上某个元素的代码
2011/03/13 Javascript
js substr支持中文截取函数代码(中文是双字节)
2013/04/17 Javascript
JS 打印功能代码可实现打印预览、打印设置等
2014/10/31 Javascript
node.js中的fs.utimesSync方法使用说明
2014/12/15 Javascript
JS+DIV+CSS排版布局实现美观的选项卡效果
2015/10/10 Javascript
easyui datagrid 大数据加载效率慢,优化解决方法(推荐)
2016/11/09 Javascript
Bootstrap table表格简单操作
2017/02/07 Javascript
arcgis for js栅格图层叠加(Raster Layer)问题
2017/11/22 Javascript
jQuery中each遍历的三种方法实例分析
2018/09/07 jQuery
vue中get请求如何传递数组参数的方法示例
2019/11/08 Javascript
JavaScript 实现轮播图特效的示例
2020/11/05 Javascript
nodejs中使用worker_threads来创建新的线程的方法
2021/01/22 NodeJs
Python中取整的几种方法小结
2017/01/06 Python
python分割列表(list)的方法示例
2017/05/07 Python
Python实现批量修改图片格式和大小的方法【opencv库与PIL库】
2018/12/03 Python
Django框架用户注销功能实现方法分析
2019/05/28 Python
使用Python实现文字转语音并生成wav文件的例子
2019/08/08 Python
Python进程池Pool应用实例分析
2019/11/27 Python
Python实现弹球小游戏
2020/08/01 Python
css3的transform造成z-index无效解决方案
2014/12/04 HTML / CSS
HTML5如何为形状图上颜色怎么绘制具有颜色和透明度的矩形
2014/06/23 HTML / CSS
StubHub智利:购买和出售您的门票
2016/11/23 全球购物
MAC Cosmetics巴西官方网站:M·A·C彩妆
2019/04/18 全球购物
蔻驰英国官网:COACH英国
2020/07/19 全球购物
幼儿园实习生辞职信
2014/01/20 职场文书
高中打架检讨书
2014/02/13 职场文书
社区母亲节活动记录
2014/03/06 职场文书
党性锻炼的心得体会
2014/09/03 职场文书
学前班语言教学计划
2015/01/20 职场文书
Python中X[:,0]和X[:,1]的用法
2021/05/10 Python
centos8安装nginx1.9.1的详细过程
2021/08/02 Servers