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 相关文章推荐
js cookies实现简单统计访问次数
Nov 24 Javascript
JavaScript判断访问的来源是手机还是电脑,用的哪种浏览器
Dec 12 Javascript
setInterval与clearInterval的使用示例代码
Jan 28 Javascript
jquery修改网页背景颜色通过css方法实现
Jun 06 Javascript
详细介绍jQuery.outerWidth() 函数具体用法
Jul 20 Javascript
利用CSS3在Angular中实现动画
Jan 15 Javascript
jQuery选择器基础入门教程
May 10 Javascript
WebSocket实现简单客服聊天系统
May 12 Javascript
简单谈谈React中的路由系统
Jul 25 Javascript
使用vue-cli打包过程中的步骤以及问题的解决
May 08 Javascript
jQuery中将json数据显示到页面表格的方法
May 27 jQuery
ajax与jsonp的区别及用法
Oct 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 setcookie指定domain参数后,在IE下设置cookie失效的解决方法
2011/09/09 PHP
那些年我们错过的魔术方法(Magic Methods)
2014/01/14 PHP
PHP正则验证Email的方法
2015/06/15 PHP
PHP入门教程之数学运算技巧总结
2016/09/11 PHP
thinkPHP+LayUI 流加载实现功能
2019/09/27 PHP
PHP7 其他语言层面的修改
2021/03/09 PHP
js加解密 脚本解密
2008/02/22 Javascript
超链接的禁用属性Disabled使用示例
2014/07/31 Javascript
Egret引擎开发指南之运行项目
2014/09/03 Javascript
jQuery中:selected选择器用法实例
2015/01/04 Javascript
跟我学习javascript创建对象(类)的8种方法
2015/11/20 Javascript
利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)
2017/04/24 Javascript
微信小程序实现topBar底部选择栏效果
2018/07/20 Javascript
分享5个小技巧让你写出更好的 JavaScript 条件语句
2018/10/20 Javascript
webpack4+react多页面架构的实现
2018/10/25 Javascript
微信公众号平台接口开发 菜单管理的实现
2019/08/14 Javascript
vue项目初始化到登录login页面的示例
2019/10/31 Javascript
VUE 单页面使用 echart 窗口变化时的用法
2020/07/30 Javascript
vue router-link 默认a标签去除下划线的实现
2020/11/06 Javascript
js实现鼠标切换图片(无定时器)
2021/01/27 Javascript
[59:53]DOTA2-DPC中国联赛 正赛 VG vs Elephant BO3 第二场 3月6日
2021/03/11 DOTA
使用Python的判断语句模拟三目运算
2015/04/24 Python
如何使用python爬取csdn博客访问量
2016/02/14 Python
python 查找文件名包含指定字符串的方法
2018/06/05 Python
python 拼接文件路径的方法
2018/10/23 Python
python中列表的切片与修改知识点总结
2019/07/23 Python
django如何自己创建一个中间件
2019/07/24 Python
Django models.py应用实现过程详解
2019/07/29 Python
python中可以声明变量类型吗
2020/06/18 Python
巴西家用小家电购物网站:Polishop
2016/08/07 全球购物
全球知名提供各类营养保健品的零售商:Vitamin Shoppe
2016/10/09 全球购物
幼师大班个人总结
2015/02/13 职场文书
事业单位工作人员2015年度思想工作总结
2015/10/15 职场文书
初中美术教学反思
2016/02/17 职场文书
详解Nginx启动失败的几种错误处理
2021/04/01 Servers
Spring实现内置监听器
2021/07/09 Java/Android