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中filter(),not(),split()使用方法
Jul 06 Javascript
IE与Firefox在JavaScript上的7个不同句法分享
Oct 30 Javascript
js将控件隐藏及display属性的使用介绍
Dec 30 Javascript
推荐JavaScript实现继承的最佳方式
Nov 11 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
Jun 06 Javascript
AngularJS通过$sce输出html的方法
Sep 22 Javascript
微信小程序 获取session_key和openid的实例
Aug 17 Javascript
微信小程序 上传头像的实例详解
Oct 27 Javascript
详解vue-cli 本地开发mock数据使用方法
May 29 Javascript
Element-ui之ElScrollBar组件滚动条的使用方法
Sep 14 Javascript
微信小程序下拉框搜索功能的实现方法
Jul 31 Javascript
如何用JavaScript检测当前浏览器是无头浏览器
Apr 27 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中动态HTML的输出技术
2006/10/09 PHP
解析php安全性问题中的:Null 字符问题
2013/06/21 PHP
php 使用html5实现多文件上传实例
2016/10/24 PHP
php array_keys 返回数组的键名
2016/10/25 PHP
PHP关于foreach复制知识点总结
2019/01/28 PHP
微信公众平台开发教程⑤ 微信扫码支付模式介绍
2019/04/10 PHP
javascript中负数算术右移、逻辑右移的奥秘探索
2013/10/17 Javascript
Javascript获取图片原始宽度和高度的方法详解
2016/09/20 Javascript
js实现点击按钮弹出上传文件的窗口
2016/12/23 Javascript
bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
2017/11/17 Javascript
js判断传入时间和当前时间大小实例(超简单)
2018/01/11 Javascript
vue中v-for加载本地静态图片方法
2018/03/03 Javascript
webgl实现物体描边效果的方法介绍
2019/11/27 Javascript
vue不操作dom实现图片轮播的示例代码
2019/12/18 Javascript
详解微信小程序中var、let、const用法与区别
2020/01/11 Javascript
使用nodejs实现JSON文件自动转Excel的工具(推荐)
2020/06/24 NodeJs
JS代码简洁方式之函数方法详解
2020/07/28 Javascript
JavaScript实现10秒后再次获取验证码
2020/12/02 Javascript
python批量同步web服务器代码核心程序
2014/09/01 Python
用Python实现QQ游戏大家来找茬辅助工具
2014/09/14 Python
Python3 处理JSON的实例详解
2017/10/29 Python
Python中使用支持向量机(SVM)算法
2017/12/26 Python
python3+PyQt5 创建多线程网络应用-TCP客户端和TCP服务器实例
2019/06/17 Python
python:按行读入,排序然后输出的方法
2019/07/20 Python
pycharm 批量修改变量名称的方法
2019/08/01 Python
Python实现二叉树的最小深度的两种方法
2019/09/30 Python
Jupyter notebook运行Spark+Scala教程
2020/04/10 Python
关于matplotlib-legend 位置属性 loc 使用说明
2020/05/16 Python
django form和field具体方法和属性说明
2020/07/09 Python
图解Python中深浅copy(通俗易懂)
2020/09/03 Python
澳大利亚排名第一的狂热牛仔品牌:ONETEASPOON
2018/11/20 全球购物
TripAdvisor日本:全球领先的旅游网站
2019/02/14 全球购物
Java基础知识面试题
2014/03/25 面试题
历史系自荐信范文
2013/12/24 职场文书
幼儿园感恩节活动方案2014
2014/10/11 职场文书
合同补充协议书
2016/03/24 职场文书