jquery中用函数来设置css样式


Posted in Javascript onDecember 22, 2016

1.jquery语法

$(selector).css(name,function(index,value))

name:必需。规定 CSS 属性的名称

function(index,value)

规定返回CSS属性新值的函数。

  • index - 可选。接受选择器的index位置
  • value - 可选。接受CSS属性的当前值

2.function(index,value)的用途

相当于对通过选择符“selector”选择到的所有对象进行一次遍历,并设置相应的css属性值,其中index和value这两个参数可有可无。

如果直接引用已有的函数,如下:

//函数colorStr()为td标签的背景色提供一个随机的背景色
$("td").css("background-color",colorStr()); 
//上面的代码就相当于直接给所有td背景色赋同一个颜色值,就像下面的代码
$("td").css("background-color","green");

以上情况不会遍历td对象,而会将所有的td设置成一样的颜色,如下图,都变成了绿色

jquery中用函数来设置css样式

如果通过function遍历就会将每个td背景色设置成不一样的颜色,代码如下:

//通过function函数调用colorStr函数,从而遍历所有的td标签,使每个td的背景色都不一样
$("td").css("background-color",function(){return colorStr()});

效果图如下:

jquery中用函数来设置css样式

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
jquery validate添加自定义验证规则(验证邮箱 邮政编码)
Dec 04 Javascript
如何在指定的地方插入html内容和文本内容
Dec 23 Javascript
jQuery grep()方法详解及实例代码
Oct 30 Javascript
原生js实现中奖信息无间隙滚动效果
Jan 18 Javascript
jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法
Mar 03 Javascript
移动端刮刮乐的实现方式(js+HTML5)
Mar 23 Javascript
Ionic项目中Native Camera的使用方法
Jun 07 Javascript
浅谈ECMAScript6新特性之let、const
Aug 02 Javascript
js 概率计算(简单版)
Sep 12 Javascript
解读vue生成的文件目录结构及说明
Nov 27 Javascript
微信小程序Echarts覆盖正常组件问题解决
Jul 13 Javascript
VueX模块的具体使用(小白教程)
Jun 05 Javascript
jquery实现(textarea)placeholder自动换行
Dec 22 #Javascript
js数组去重的hash方法
Dec 22 #Javascript
JavaScript生成.xls文件的代码
Dec 22 #Javascript
微信小程序 表单Form实例详解(附源码)
Dec 22 #Javascript
微信小程序 122100版本更新问题解决方案
Dec 22 #Javascript
JS闭包与延迟求值用法示例
Dec 22 #Javascript
jQuery实现两个select控件的互移操作
Dec 22 #Javascript
You might like
Discuz论坛密码与密保加密规则
2016/12/19 PHP
thinkPHP框架中执行原生SQL语句的方法
2017/10/25 PHP
YII2框架使用控制台命令的方法分析
2020/03/18 PHP
用prototype实现的简单小巧的多级联动菜单
2007/03/24 Javascript
比较简单实用的使用正则三种版本的js去空格处理方法
2007/11/18 Javascript
Javascript 类型转换方法
2010/10/24 Javascript
面向对象的Javascript之二(接口实现介绍)
2012/01/27 Javascript
getJSON调用后台json数据时函数被调用两次的原因猜想
2013/09/29 Javascript
javascript定义变量时有var和没有var的区别探讨
2014/07/21 Javascript
javascript里使用php代码实例
2014/12/13 Javascript
基于Bootstrap 3 JQuery及RegExp的表单验证功能
2017/02/16 Javascript
微信小程序 wx.login解密出现乱码的问题解决办法
2017/03/10 Javascript
vue中如何实现变量和字符串拼接
2017/06/19 Javascript
Vue 2.0学习笔记之Vue中的computed属性
2017/10/16 Javascript
微信小程序如何获取用户信息
2018/01/26 Javascript
对angular 实时更新模板视图的方法$apply详解
2018/10/09 Javascript
vue swipe自定义组件实现轮播效果
2019/07/03 Javascript
Vue+Element自定义纵向表格表头教程
2020/10/26 Javascript
[15:58]DOTA2国际邀请赛采访专栏:Tongfu.Sansheng&KingJ,DK.rOtk
2013/08/08 DOTA
[58:37]Serenity vs Fnatic 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
python中__call__内置函数用法实例
2015/06/04 Python
Python使用lxml模块和Requests模块抓取HTML页面的教程
2016/05/16 Python
Java实现的执行python脚本工具类示例【使用jython.jar】
2018/03/29 Python
获取django框架orm query执行的sql语句实现方法分析
2019/06/20 Python
python中的单引号双引号区别知识点总结
2019/06/23 Python
Python语言异常处理测试过程解析
2020/01/08 Python
网页切图的CSS和布局经验与要点
2015/04/09 HTML / CSS
html5超简单的localStorage实现记住密码的功能实现
2017/09/07 HTML / CSS
英国著名国际平价时尚男装品牌:Topman
2016/08/27 全球购物
美国知名珠宝首饰品牌:Gemvara
2017/10/06 全球购物
校优秀毕业生主要事迹
2014/05/26 职场文书
十一国庆节“向国旗敬礼”主题班会活动方案
2014/09/27 职场文书
教师节老师寄语
2015/05/28 职场文书
新郎新娘致辞
2015/07/31 职场文书
使用feign服务调用添加Header参数
2021/06/23 Java/Android
关于的python五子棋的算法
2022/05/02 Python