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 相关文章推荐
JSDoc 介绍使用规范JsDoc的使用介绍
Feb 12 Javascript
Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例
Aug 28 Javascript
jQuery的DOM操作之删除节点示例
Jan 03 Javascript
jquery使用jxl插件导出excel示例
Apr 14 Javascript
使用jquery解析XML示例代码
Sep 05 Javascript
jQuery弹出框代码封装DialogHelper
Jan 30 Javascript
javascript数组去重的六种方法汇总
Aug 16 Javascript
JS实现的仿淘宝交易倒计时效果
Nov 27 Javascript
jQuery封装的屏幕居中提示信息代码
Jun 08 Javascript
JS实现随机颜色的3种方法与颜色格式的转化
Jan 05 Javascript
javascript编程实现栈的方法详解【经典数据结构】
Apr 11 Javascript
JavaScript随机数的组合问题案例分析
May 16 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中$_SERVER[PHP_SELF] 和 $_SERVER[SCRIPT_NAME]之间的区别
2009/09/05 PHP
对于Laravel 5.5核心架构的深入理解
2018/02/22 PHP
Laravel框架模板加载,分配变量及简单路由功能示例
2018/06/11 PHP
PHP堆栈调试操作简单示例
2018/06/15 PHP
jquery 模式对话框终极版实现代码
2009/09/28 Javascript
js变量、作用域及内存详解
2014/09/23 Javascript
jQuery实现锚点scoll效果实例分析
2015/03/10 Javascript
jquery实现两边飘浮可关闭的对联广告
2015/11/27 Javascript
基于jQuery和Bootstrap框架实现仿知乎前端动态列表效果
2016/11/09 Javascript
js遍历json对象所有key及根据动态key获取值的方法(必看)
2017/03/09 Javascript
JQuery实现定时刷新功能代码
2017/05/09 jQuery
轻松理解vue的双向数据绑定问题
2017/10/30 Javascript
微信小程序左右滑动的实现代码
2017/12/15 Javascript
基于JavaScript实现简单的音频播放功能
2018/01/07 Javascript
async/await地狱该如何避免详解
2018/05/10 Javascript
[54:53]完美世界DOTA2联赛PWL S2 GXR vs PXG 第二场 11.18
2020/11/18 DOTA
Python中解析JSON并同时进行自定义编码处理实例
2015/02/08 Python
Python根据区号生成手机号码的方法
2015/07/08 Python
Python 专题五 列表基础知识(二维list排序、获取下标和处理txt文本实例)
2017/03/20 Python
理解Python中的绝对路径和相对路径
2017/08/30 Python
基于Python和Scikit-Learn的机器学习探索
2017/10/16 Python
Python中xml和json格式相互转换操作示例
2018/12/05 Python
对Python _取log的几种方式小结
2019/07/25 Python
解决TensorFlow模型恢复报错的问题
2020/02/06 Python
纯CSS3实现手风琴风格菜单具体步骤
2013/05/06 HTML / CSS
CSS3中的transform属性进行2D和3D变换的基本用法
2016/05/12 HTML / CSS
乐天旅游台湾网站:Rakuten Travel TW
2017/06/01 全球购物
Delphi笔试题
2016/11/14 面试题
庆祝教师节活动方案
2014/01/31 职场文书
防火标语大全
2014/10/06 职场文书
中学生清明节演讲稿
2015/03/18 职场文书
2015年端午节国旗下演讲稿
2015/03/19 职场文书
2015年少先队活动总结
2015/03/25 职场文书
观看建国大业观后感
2015/06/01 职场文书
MySQL系列之九 mysql查询缓存及索引
2021/07/02 MySQL
python编程项目中线上问题排查与解决
2021/11/01 Python