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 相关文章推荐
jQuery 操作XML入门
Dec 25 Javascript
对xmlHttp对象方法和属性的理解
Jan 17 Javascript
javascript数字格式化通用类 accounting.js使用
Aug 24 Javascript
javascript操作JSON的要领总结
Dec 09 Javascript
jQuery实现菜单感应鼠标滑动动画效果的方法
Feb 28 Javascript
JavaScript中常见的字符串操作函数及用法汇总
May 04 Javascript
jquery实现倒计时功能
Dec 28 Javascript
利用Vue v-model实现一个自定义的表单组件
Apr 27 Javascript
VS Code转换大小写、修改选中文字或代码颜色的方法
Dec 15 Javascript
详解Vue源码之数据的代理访问
Dec 11 Javascript
微信小程序实现录音功能
Nov 22 Javascript
jQuery实现鼠标移入显示蒙版效果
Jan 11 jQuery
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 mysql数据库操作分页类
2008/06/04 PHP
IP138 IP地址查询小偷实现代码
2010/02/15 PHP
求帮忙修改个php curl模拟post请求内容后并下载文件的解决思路
2015/09/20 PHP
PHP魔术方法之__call与__callStatic使用方法
2017/07/23 PHP
浅谈使用 Yii2 AssetBundle 中 $publishOptions 的正确姿势
2017/11/08 PHP
Yii框架参数配置文件params用法实例分析
2019/09/11 PHP
Laravel框架下的Contracts契约详解
2020/03/17 PHP
jscript之List Excel Color Values
2007/06/13 Javascript
jquery实现文本框鼠标右击无效以及不能输入的代码
2010/11/05 Javascript
javascript中indexOf技术详解
2015/05/07 Javascript
jquery中toggle函数交替使用问题
2015/06/22 Javascript
javascript实现标签切换代码示例
2016/05/22 Javascript
Bootstrap页面布局基础知识全面解析
2016/06/13 Javascript
jquery+ajax+text文本框实现智能提示完整实例
2016/07/09 Javascript
将html页面保存成图片,图片写入pdf的实现方法(推荐)
2016/09/17 Javascript
基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )
2017/03/30 Javascript
JavaScript实现的简单加密解密操作示例
2018/06/01 Javascript
nuxt 自定义 auth 中间件实现令牌的持久化操作
2020/11/05 Javascript
[01:56]2014DOTA2西雅图邀请赛 MVP外卡赛老队长精辟点评
2014/07/09 DOTA
[02:37]2018DOTA2亚洲邀请赛赛前采访 VP.no[o]ne心中最强SOLO是谁
2018/04/04 DOTA
Python中的__new__与__init__魔术方法理解笔记
2014/11/08 Python
Python程序员面试题 你必须提前准备!(答案及解析)
2018/01/23 Python
python编写简易聊天室实现局域网内聊天功能
2018/07/28 Python
python使用phoenixdb操作hbase的方法示例
2019/02/28 Python
python3中关于excel追加写入格式被覆盖问题(实例代码)
2020/01/10 Python
使用python实现多维数据降维操作
2020/02/24 Python
解决导入django_filters不成功问题No module named 'django_filter'
2020/07/15 Python
乌克兰鞋类购物网站:Eobuv.com.ua
2020/11/28 全球购物
毕业生教师求职信
2013/10/20 职场文书
酒店副总岗位职责
2013/12/24 职场文书
落实八项规定专题民主生活会对照检查材料
2014/09/15 职场文书
会计试用期自我评价
2014/09/19 职场文书
2015年双拥工作总结
2015/04/08 职场文书
2015年度绩效考核工作总结
2015/05/27 职场文书
Python的flask接收前台的ajax的post数据和get数据的方法
2021/04/12 Python
Oracle锁表解决方法的详细记录
2022/06/05 Oracle