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 相关文章推荐
Jsonp 跨域的原理以及Jquery的解决方案
Jun 27 Javascript
javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
Aug 22 Javascript
jQuery 浮动导航菜单适合购物商品类型的网站
Sep 09 Javascript
JS实现同时搜索百度和必应的方法
Jan 27 Javascript
js实现每日自动换一张图片的方法
May 04 Javascript
jQuery动画显示和隐藏效果实例演示(附demo源码下载)
Dec 31 Javascript
浅谈JavaScript中数组的增删改查
Jun 20 Javascript
JS装饰器函数用法总结
Apr 21 Javascript
Flutter 超实用简单菜单弹出框 PopupMenuButton功能
Aug 06 Javascript
JS+canvas五子棋人机对战实现步骤详解
Jun 04 Javascript
vue项目中openlayers绘制行政区划
Dec 24 Vue.js
js中Object.create实例用法详解
Oct 05 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 关于访问控制的和运算符优先级介绍
2013/07/08 PHP
JS 页面内容搜索,类似于 Ctrl+F功能的实现代码
2007/08/13 Javascript
基于jquery的loading 加载提示效果实现代码
2011/09/01 Javascript
JavaScript闭包 懂不懂由你反正我是懂了
2011/10/21 Javascript
file模式访问网页时iframe高度自适应解决方案
2013/01/16 Javascript
浅析js封装和作用域
2013/07/09 Javascript
Node.js插件的正确编写方式
2014/08/03 Javascript
js如何实现点击标签文字,文字在文本框出现
2015/08/05 Javascript
drag-and-drop实现图片浏览器预览
2015/08/06 Javascript
jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果实例
2015/08/22 Javascript
详解Angular Reactive Form 表单验证
2017/07/06 Javascript
JavaScript设计模式之构造函数模式实例教程
2018/07/02 Javascript
关于vue状态过渡transition不起作用的原因解决
2019/04/09 Javascript
vue简单练习 桌面时钟的实现代码实例
2019/09/19 Javascript
Selenium执行Javascript脚本参数及返回值过程详解
2020/04/01 Javascript
python实现合并两个数组的方法
2015/05/16 Python
整理Python 常用string函数(收藏)
2016/05/30 Python
Django开发中复选框用法示例
2018/03/20 Python
python批量读取txt文件为DataFrame的方法
2018/04/03 Python
Tesserocr库的正确安装方式
2018/10/19 Python
8段用于数据清洗Python代码(小结)
2019/10/31 Python
python GUI库图形界面开发之PyQt5控件QTableWidget详细使用方法与属性
2020/02/25 Python
Python如何读写CSV文件
2020/08/13 Python
python实现按日期归档文件
2021/01/30 Python
法国时尚童装网站:Melijoe
2016/08/10 全球购物
俄罗斯旅游网站:Tripadvisor俄罗斯
2017/03/21 全球购物
Linux不知道文件后缀名怎么判断文件类型
2014/08/21 面试题
网站开发实习生的自我评价
2013/12/11 职场文书
小学评语大全
2014/04/22 职场文书
海南召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
售房协议书范本2014
2014/10/23 职场文书
琅琊山导游词
2015/02/05 职场文书
2015年劳动部工作总结
2015/05/23 职场文书
2016年过年放假安排通知
2015/08/18 职场文书
学习社交礼仪心得体会
2016/01/22 职场文书
优秀范文:读《红岩》有感3篇
2019/10/14 职场文书