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的Date对象(制作简易钟表)
Apr 07 Javascript
jQuery 选择同时包含两个class的元素的实现方法
Jun 01 Javascript
zepto与jquery的区别及zepto的不同使用8条小结
Jul 28 Javascript
JQuery之proxy实现绑定代理方法
Aug 01 Javascript
JavaScript将base64图片转换成formData并通过AJAX提交的实现方法
Oct 24 Javascript
利用jquery实现实时更新歌词的方法
Jan 06 Javascript
js学习总结之DOM2兼容处理重复问题的解决方法
Jul 27 Javascript
ES6新增的math,Number方法
Aug 06 Javascript
bootstrap-table formatter 使用vue组件的方法
May 09 Javascript
uni-app使用微信小程序云函数的步骤示例
May 22 Javascript
vue组件实现移动端九宫格转盘抽奖
Oct 16 Javascript
通过实例了解Render Props回调地狱解决方案
Nov 04 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使用gzip压缩传输js和css文件的方法
2015/07/29 PHP
PHP正则表达式入门教程(推荐)
2016/05/18 PHP
php的4种常用运行方式详解
2016/12/22 PHP
Centos7安装swoole扩展操作示例
2020/03/26 PHP
Javascript中暂停功能的实现代码
2007/03/04 Javascript
ExtJS的FieldSet的column列布局
2009/11/20 Javascript
javascript 拖放效果实现代码
2010/01/22 Javascript
基于jquery的无刷新分页技术
2011/06/11 Javascript
jQuery UI Dialog 创建友好的弹出对话框实现代码
2012/04/12 Javascript
实现web打印的各种方法介绍及实现代码
2013/01/09 Javascript
基于JQuery 选择器使用说明介绍
2013/04/18 Javascript
在JS数组特定索引处指定位置插入元素
2014/07/27 Javascript
jquery动态分页效果堪比时光网
2014/09/25 Javascript
JQ技术实现注册页面带有校验密码强度
2015/07/27 Javascript
javascript设计简单的秒表计时器
2020/09/05 Javascript
详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖
2017/03/01 Javascript
jQuery控制元素隐藏和显示
2017/03/03 Javascript
js中值引用和地址引用实例分析
2019/06/21 Javascript
关于layui 下拉列表的change事件详解
2019/09/20 Javascript
详解JavaScript 的执行机制
2020/09/18 Javascript
vue自定义树状结构图的实现方法
2020/10/18 Javascript
查看Python安装路径以及安装包路径小技巧
2015/04/28 Python
12步入门Python中的decorator装饰器使用方法
2016/06/20 Python
解决python3 网络请求路径包含中文的问题
2018/05/10 Python
马来西亚领先的在线礼品店:Giftr
2018/08/23 全球购物
英国经济型酒店品牌:Travelodge
2019/12/17 全球购物
优秀员工自荐书范文
2013/12/08 职场文书
商场端午节活动方案
2014/01/29 职场文书
毕业生自荐信格式
2014/03/07 职场文书
学习方法演讲稿
2014/05/10 职场文书
关于学习的演讲稿
2014/05/10 职场文书
乐观自信演讲稿范文
2014/05/21 职场文书
个人融资协议书
2014/10/02 职场文书
酒店采购员岗位职责
2015/04/03 职场文书
班级管理经验交流材料
2015/11/02 职场文书
高三数学复习备考教学反思
2016/02/18 职场文书