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 相关文章推荐
ExtJs的Date格式字符代码
Dec 30 Javascript
对xmlHttp对象的理解
Jan 17 Javascript
Javascript公共脚本库系列(一): 弹出层脚本
Feb 24 Javascript
IE不支持getElementsByClassName最终完美解决方案
Dec 17 Javascript
jquery datepicker参数介绍和示例
Apr 15 Javascript
javascript自定义函数参数传递为字符串格式
Jul 29 Javascript
Javascript的表单与验证-非空验证
Mar 18 Javascript
详解Jquery实现ready和bind事件
Apr 14 Javascript
vue axios请求拦截实例代码
Mar 29 Javascript
Vue中父子组件通讯之todolist组件功能开发
May 21 Javascript
Vue实现简易翻页效果源码分享
Nov 08 Javascript
vue $router和$route的区别详解
Dec 02 Vue.js
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/01/17 PHP
php Smarty 字符比较代码
2011/02/27 PHP
Linux下CoreSeek及PHP扩展模块的安装
2012/09/23 PHP
php读取图片内容并输出到浏览器的实现代码
2013/08/08 PHP
php通过排列组合实现1到9数字相加都等于20的方法
2015/08/03 PHP
Linux下从零开始安装配置Nginx服务器+PHP开发环境
2015/12/21 PHP
PHP中spl_autoload_register()函数用法实例详解
2016/07/18 PHP
php实现基于openssl的加密解密方法
2016/09/30 PHP
PHP7扩展开发教程之Hello World实现方法示例
2017/08/03 PHP
php框架CI(codeigniter)自动加载与自主创建对象操作实例分析
2020/06/06 PHP
PHP 实现重载
2021/03/09 PHP
javascript 操作cookies及正确使用cookies的属性
2009/10/15 Javascript
关于jQuery参考实例 1.0 jQuery的哲学
2013/04/07 Javascript
AngularJS入门教程之服务(Service)
2016/07/27 Javascript
jquery实现简单实用的轮播器
2017/05/23 jQuery
详谈js中标准for循环与foreach(for in)的区别
2017/11/02 Javascript
bootstrap实现二级下拉菜单效果
2017/11/23 Javascript
mpvue小程序循环动画开启暂停的实现方法
2019/05/15 Javascript
JavaScript手写数组的常用函数总结
2020/11/22 Javascript
[04:03]辉夜杯主赛事 12月25日RECAP精彩回顾
2015/12/26 DOTA
[01:10:16]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第一局
2016/02/27 DOTA
Python与Redis的连接教程
2015/04/22 Python
Python 26进制计算实现方法
2015/05/28 Python
Python简单遍历字典及删除元素的方法
2016/09/18 Python
pandas 空的dataframe 插入列名的示例
2018/10/30 Python
tensorflow入门:TFRecordDataset变长数据的batch读取详解
2020/01/20 Python
Flask模板引擎Jinja2使用实例
2020/04/23 Python
小结Python的反射机制
2020/09/28 Python
详解Html5中video标签那些属性和方法
2019/07/01 HTML / CSS
奥地利购买珠宝和手表网站:ELLA JUWELEN
2019/09/03 全球购物
实现向右循环移位
2014/07/31 面试题
生物化工工艺专业应届生求职信
2013/10/08 职场文书
工商管理专业自荐信
2014/06/03 职场文书
狼牙山五壮士观后感
2015/06/09 职场文书
公司车辆管理制度
2015/08/04 职场文书
创业计划书之面包店
2019/09/12 职场文书