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 相关文章推荐
fromCharCode和charCodeAt 方法
Dec 27 Javascript
js实现DIV的一些简单控制
Jun 04 Javascript
js表格分页实现代码
Sep 18 Javascript
iscroll碰到Select无法选择下拉刷新的解决办法
May 21 Javascript
js获取腾讯视频ID的方法
Oct 03 Javascript
jQuery基于正则表达式的表单验证功能示例
Jan 21 Javascript
微信小程序实现实时圆形进度条的方法示例
Feb 24 Javascript
JS实现课堂随机点名和顺序点名
Mar 09 Javascript
vue使用代理解决请求跨域问题详解
Jul 24 Javascript
微信小程序利用for循环解决内容变更问题
Mar 05 Javascript
ES6箭头函数和扩展实例分析
May 23 Javascript
详解JavaScript中的执行上下文及调用堆栈
Apr 29 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结合Mysql数据库实现留言板功能
2016/03/04 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
JavaScript类和继承 constructor属性
2010/03/04 Javascript
extjs中grid中嵌入动态combobox的应用
2011/01/01 Javascript
Prototype源码浅析 String部分(二)
2012/01/16 Javascript
javascript学习笔记(二十) 获得和设置元素的特性(属性)
2012/06/20 Javascript
jquery如何改变html标签的样式(两种实现方法)
2013/01/16 Javascript
兼容IE、firefox以及chrome的js获取时间(getFullYear)
2014/07/04 Javascript
jQueryUI DatePicker 添加时分秒
2016/06/04 Javascript
微信小程序通过api接口将json数据展现到小程序示例
2017/01/20 Javascript
canvas简单快速的实现知乎登录页背景效果
2017/05/08 Javascript
简述JS控制台的使用
2018/07/15 Javascript
JavaScript数据结构与算法之二叉树遍历算法详解【先序、中序、后序】
2019/02/21 Javascript
微信小程序template模板与component组件的区别和使用详解
2019/05/22 Javascript
原生js实现的移动端可拖动进度条插件功能详解
2019/08/15 Javascript
Vue 使用beforeEach实现登录状态检查功能
2019/10/31 Javascript
TypeScript高级用法的知识点汇总
2019/12/17 Javascript
Vue数字输入框组件使用方法详解
2020/02/10 Javascript
JavaScript实现沿五角星形线摆动的小圆实例详解
2020/07/28 Javascript
详解Vue中的watch和computed
2020/11/09 Javascript
Python socket编程实例详解
2015/05/27 Python
python连接PostgreSQL数据库的过程详解
2019/09/18 Python
Python any()函数的使用方法
2019/10/28 Python
Pytorch 神经网络—自定义数据集上实现教程
2020/01/07 Python
pytorch1.0中torch.nn.Conv2d用法详解
2020/01/10 Python
Python使用py2neo操作图数据库neo4j的方法详解
2020/01/13 Python
Python3爬虫中Ajax的用法
2020/07/10 Python
基于opencv实现简单画板功能
2020/08/02 Python
2014党的群众路线教育实践活动总结材料
2014/10/31 职场文书
4S店收银员岗位职责
2015/04/07 职场文书
2015年采购员工作总结
2015/04/27 职场文书
给老婆的保证书怎么写
2015/05/08 职场文书
学校体育节班级口号
2015/12/25 职场文书
自制短波长线天线频率预选器 - 成功消除B2K之流的镜像
2021/04/22 无线电
用Python可视化新冠疫情数据
2022/01/18 Python
Win11 Beta 预览版 22621.575 和 22622.575更新补丁KB5016694发布(附更新内容大全)
2022/08/14 数码科技