jQuery css() 方法动态修改CSS属性


Posted in Javascript onSeptember 25, 2016

我们先来看个实例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>添加和删除类</title>
  <style>
    div{width: 500px;height: 500px;background: #1c94c4;}
    button{width: 80px;height: 40px;margin: 10px;font-size: 30px;}
  </style>
  <script src="js/jquery-3.1.0.min.js"></script>
  <script>
    $(function(){
//      $("div").css("width","300");//设置值(两个参数)
//      alert($("div").css("width"));//读取值(一个参数)
      $("#add-btn").on("click",function(){
        $("div").css("width","+=20")
      });
      $("#sub-btn").on("click",function(){
        $("div").css("width","-=20")
      });
      $("p").css("backgroundColor",function(dap){
        return dap%2 == 0 ? "red":"blue";//索引值从0开始(三目运算)
      })
    })
  </script>

</head>
<body>
<button type="button" id="add-btn"> + </button>
<button type="button" id="sub-btn"> - </button>
<div></div>
<p>aafasf</p>
<p>aafasf</p>
<p>aafasf</p>
<p>aafasf</p>
<p>aafasf</p>
</body>
</html>

css()方法在使用上具有多样性,我们先来了解css()方法基本知识。

css() 方法设置或返回被选元素的一个或多个样式属性。

返回 CSS 属性

如需返回指定的 CSS 属性的值,请使用如下语法:

css("propertyname");下面的例子将返回首个匹配元素的 background-color 值:

实例

$("p").css("background-color");

设置 CSS 属性

如需设置指定的 CSS 属性,请使用如下语法:

css("propertyname","value");下面的例子将为所有匹配元素设置 background-color 值:

实例

$("p").css("background-color","yellow");

设置多个 CSS 属性

如需设置多个 CSS 属性,请使用如下语法:

css({"propertyname":"value","propertyname":"value",...});下面的例子将为所有匹配元素设置 background-color 和 font-size:

实例

$("p").css({"background-color":"yellow","font-size":"200%"});

如我们要改变链接颜色,我们可以使用下面的代码:

$("#61dh a").css('color','#123456');

//这里选择器‘$("#61dh a")'表示ID为‘#61dh'的元素下的所有链接。
//.css(‘color','#123456');表示把颜色设为'#123456'如果我们需要改变多个样式属性,我们可以先定义属性变量,然后直接赋值给css()方法。示例如下:

var divcss = {
 background: '#EEE',
   width: '478px',
   margin: '10px 0 0',
   padding: '5px 10px',
   border: '1px solid #CCC'
};
$("#result").css(divcss);

//这里我们先定义了一个CSS样式属性变量‘divcss',这类似于建立一个外部CSS文件。
//然后通过jQuery提供的css()方法,把属性赋给ID为'#result'的DIV。另外jQuery提供的css()方法还可以用来查看某个元素的css属性值。例如,我们想查看链接的颜色,可以使用下面的代码:

$("#61dh a").css("color")

//和第一个例子相似,但是这里我们只传递一个参数(样式属性)最后要介绍的是如何设置鼠标划过后的链接样式(比如: 颜色)。我们无法使用选择器直接选择鼠标划过状态下的链接,也就是说$("a:hover")是不成立的。因此我们需要用到jQuery提供的事件类方法 - hover()。值得注意的是,hover()方法需要定义两个函数,一个是鼠标划过时;另一个是鼠标划过后。具体方法如下:

$("#61dh a").css('color','#123456');
 $("#61dh a").hover(function(){
 $(this).css('color','#999');
 },
 function(){
 $(this).css('color','#123456');
});

//hover()方法的两个函数使用用逗号分隔你或许注意到这种方法一点都不简洁(违背了jQuery的宗旨),其实jQuery提供的hover()方法不是用来改变CSS样式的。在实际运用中,建议使用添加/移出CSS的方法来改变鼠标划过的链接样式。

Javascript 相关文章推荐
下载站控制介绍字数显示的脚本 显示全部 隐藏介绍等功能
Sep 19 Javascript
深入理解JavaScript系列(22):S.O.L.I.D五大原则之依赖倒置原则DIP详解
Mar 05 Javascript
ECMAScript5(ES5)中bind方法使用小结
May 07 Javascript
JS实现超简单的鼠标拖动效果
Nov 02 Javascript
jQuery Ztree行政地区树状展示(点击加载)
Nov 09 Javascript
bootstrap滚动监控器使用方法解析
Jan 13 Javascript
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
Jul 12 jQuery
基于Datatables跳转到指定页的简单实例
Nov 09 Javascript
vue使用v-for实现hover点击效果
Sep 29 Javascript
Angular7.2.7路由使用初体验
Mar 01 Javascript
js比较两个单独的数组或对象是否相等的实例代码
Apr 28 Javascript
vue+iview分页组件的封装
Nov 17 Vue.js
jquery attr()设置和获取属性值实例教程
Sep 25 #Javascript
关于js原型的面试题讲解
Sep 25 #Javascript
前端设计师们最常用的JS代码汇总
Sep 25 #Javascript
JavaScript使用Range调色及透明度实例
Sep 25 #Javascript
JavaScript中原型链存在的问题解析
Sep 25 #Javascript
JavaScript制作颜色反转小游戏
Sep 25 #Javascript
JavaScript实现简单的日历效果
Sep 25 #Javascript
You might like
咖啡冲泡指南 咖啡有哪些制作方式 单品咖啡 意式咖啡
2021/03/06 冲泡冲煮
PHP编程与应用
2006/10/09 PHP
PHP动态分页函数,PHP开发分页必备啦
2011/11/07 PHP
解析php根据ip查询所在地区(非常有用,赶集网就用到)
2013/07/01 PHP
PHP实现图片旋转效果实例代码
2014/10/01 PHP
Dwz与thinkphp整合下的数据导出到Excel实例
2014/12/04 PHP
php实现MySQL数据库备份与还原类实例
2014/12/09 PHP
php函数传值的引用传递注意事项分析
2016/06/25 PHP
SCP远程VPS快速搬家和WDCP升级php5.3安装memcached和eaccelerator教程
2017/07/27 PHP
基于jQuery+HttpHandler实现图片裁剪效果代码(适用于论坛, SNS)
2011/09/02 Javascript
JQuery实现鼠标滚轮滑动到页面节点
2015/07/28 Javascript
JQuery悬停控制图片轮播——代码简单
2015/08/05 Javascript
14款经典网页图片和文字特效的jQuery插件-前端开发必备
2015/08/25 Javascript
JS实现队列与堆栈的方法
2016/04/21 Javascript
js中遍历Map对象的方法
2016/07/27 Javascript
js 获取元素所有兄弟节点的实现方法
2016/09/06 Javascript
JavaScript制作简单分页插件
2016/09/11 Javascript
jquery插件ContextMenu设置右键菜单
2017/03/13 Javascript
微信小程序商城项目之商品属性分类(4)
2017/04/17 Javascript
基于JavaScript实现无限加载瀑布流
2017/07/21 Javascript
vue项目每30秒刷新1次接口的实现方法
2018/12/04 Javascript
详解微信小程序缓存--缓存时效性
2019/05/02 Javascript
使用JavaScript和MQTT开发物联网应用示例解析
2020/08/07 Javascript
Python 返回汉字的汉语拼音
2009/02/27 Python
python网络编程之UDP通信实例(含服务器端、客户端、UDP广播例子)
2014/04/25 Python
跟老齐学Python之字典,你还记得吗?
2014/09/20 Python
ubuntu中配置pyqt4环境教程
2017/12/27 Python
Django 请求Request的具体使用方法
2019/11/11 Python
简单了解python元组tuple相关原理
2019/12/02 Python
欧舒丹比利时官网:L’OCCITANE比利时
2017/04/25 全球购物
现在输入n个数字,以逗号,分开;然后可选择升或者降序排序;按提交键就在另一页面显示按什么排序,结果为,提供reset
2012/11/09 面试题
毕业生幼师求职自荐信
2013/10/01 职场文书
党员实事承诺书
2014/03/26 职场文书
乡镇党员群众路线教育实践活动对照检查材料思想汇报
2014/10/05 职场文书
七年级上册生物的课件
2019/08/07 职场文书
Golang 1.18 多模块Multi-Module工作区模式的新特性
2022/04/11 Golang