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 模拟JQuery的Ready方法实现并出现的问题
Dec 06 Javascript
jQuery中的常用事件总结
Dec 27 Javascript
js或css文件后面跟参数的原因说明
Jan 09 Javascript
javascript 自定义回调函数示例代码
Sep 26 Javascript
Bootstrap基本组件学习笔记之缩略图(13)
Dec 08 Javascript
Vue-resource拦截器判断token失效跳转的实例
Oct 27 Javascript
基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
Jan 09 Javascript
Vue-cli配置打包文件本地使用的教程图解
Aug 02 Javascript
vue.js实现会动的简历(包含底部导航功能,编辑功能)
Apr 08 Javascript
VUE实现强制渲染,强制更新
Oct 29 Javascript
javascript实现一款好看的秒表计时器
Sep 05 Javascript
原生js实现购物车
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显示今天、今月、上月、今年的起点/终点时间戳的代码
2011/05/25 PHP
有关PHP中MVC的开发经验分享
2012/05/17 PHP
在项目中寻找代码的坏命名
2012/07/14 PHP
php如何执行非缓冲查询API
2016/07/22 PHP
javascript入门基础之私有变量
2010/02/23 Javascript
再次分享18个非常棒的jQuery表格插件
2011/04/10 Javascript
使用Chart.js图表库制作漂亮的响应式表单
2015/10/28 Javascript
jQuery技巧之让任何组件都支持类似DOM的事件管理
2016/04/05 Javascript
js中获取时间new Date()的全面介绍
2016/06/20 Javascript
JS判断输入字符串长度实例代码(汉字算两个字符,字母数字算一个)
2016/08/02 Javascript
js实现图片缓慢放大缩小效果
2016/08/02 Javascript
简单实现JS计算器功能
2016/12/21 Javascript
JS判断两个对象内容是否相等的方法示例
2017/04/10 Javascript
JavaScript实现的原生态Tab标签页功能【兼容IE6】
2017/09/18 Javascript
React/Redux应用使用Async/Await的方法
2017/11/16 Javascript
JS基于对象的特性实现去除数组中重复项功能详解
2017/11/17 Javascript
《javascript少儿编程》location术语总结
2018/05/27 Javascript
[01:56]生活中的妖精之七夕特别档
2016/08/09 DOTA
[01:10:03]OG vs EG 2018国际邀请赛淘汰赛BO3 第三场 8.23
2018/08/24 DOTA
使用Python下的XSLT API进行web开发的简单教程
2015/04/15 Python
PyChar学习教程之自定义文件与代码模板详解
2017/07/17 Python
Python中input与raw_input 之间的比较
2017/08/20 Python
CentOS 7下安装Python3.6 及遇到的问题小结
2018/11/08 Python
对Python3 解析html的几种操作方式小结
2019/02/16 Python
python批量识别图片指定区域文字内容
2019/04/30 Python
pyinstaller打包多个py文件和去除cmd黑框的方法
2019/06/21 Python
Xadmin+rules实现多选行权限方式(级联效果)
2020/04/07 Python
基于Python 的语音重采样函数解析
2020/07/06 Python
python中查看.db文件中表格的名字及表格中的字段操作
2020/07/07 Python
纯CSS3实现手风琴风格菜单具体步骤
2013/05/06 HTML / CSS
外企财务年会演讲稿
2014/01/03 职场文书
优秀体育委员自荐书
2014/01/31 职场文书
历史专业大学生职业生涯规划书
2014/03/13 职场文书
竞选班干部的演讲稿
2014/04/24 职场文书
Java获取e.printStackTrace()打印的信息方式
2021/08/07 Java/Android
最新动漫情报:2022年7月新番定档超过30部, OVERLORD骨王第四季也在其中噢
2022/05/04 日漫