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的简单&简陋Tabs插件代码
Feb 09 Javascript
jQuery 核心函数以及jQuery对象
Mar 23 Javascript
jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别
Dec 02 Javascript
js实现仿百度汽车频道选择汽车图片展示实例
May 06 Javascript
谈谈JavaScript异步函数发展历程
Sep 29 Javascript
JavaScript 继承详解(五)
Oct 11 Javascript
vue v-model表单控件绑定详解
May 17 Javascript
jQuery EasyUI 选项卡面板tabs的使用实例讲解
Dec 25 jQuery
Js面试算法详解
Apr 08 Javascript
webstrom Debug 调试vue项目的方法步骤
Jul 17 Javascript
JavaScript枚举选择jquery插件代码实例
Nov 17 jQuery
vue中data里面的数据相互使用方式
Jun 05 Vue.js
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
php导出CSV抽象类实例
2014/09/24 PHP
PHP获取指定日期是星期几的实现方法
2016/11/30 PHP
Yii2实现ActiveForm ajax提交
2017/05/26 PHP
PHP http请求超时问题解决方案
2020/11/13 PHP
JavaScript的面向对象(二)
2006/11/09 Javascript
jQuery 1.3 和 Validation 验证插件1.5.1
2009/07/09 Javascript
javascript实现十六进制颜色值(HEX)和RGB格式相互转换
2014/06/20 Javascript
如何减少浏览器的reflow和repaint
2015/02/26 Javascript
JavaScript跨浏览器获取页面中相同class节点的方法
2015/03/03 Javascript
JavaScript实现打开链接页面的方式汇总
2016/06/02 Javascript
AngularJs定制样式插入到ueditor中的问题小结
2016/08/01 Javascript
更靠谱的H5横竖屏检测方法(js代码)
2016/09/13 Javascript
d3.js入门教程之数据绑定详解
2017/04/28 Javascript
Js自定义多选框效果的实例代码
2017/07/05 Javascript
vue、react等单页面项目应该这样子部署到服务器
2018/01/03 Javascript
深入浅析AngularJs模版与v-bind
2018/07/06 Javascript
微信小程序实现跑马灯效果
2020/10/21 Javascript
微信小程序 wepy框架与iview-weapp的用法详解
2019/04/10 Javascript
微信小程序以7天为周期连续签到7天功能效果的示例代码
2020/08/20 Javascript
Python批量转换文件编码格式
2015/05/17 Python
python 多线程将大文件分开下载后在合并的实例
2018/11/09 Python
Python OpenCV图像指定区域裁剪的实现
2019/10/30 Python
CSS3的resize属性使用初探
2015/09/27 HTML / CSS
美国在线轮胎零售商:SimpleTire
2019/04/08 全球购物
Vrbo西班牙:预订您的度假公寓(公寓、乡村房屋…)
2020/04/27 全球购物
英语自我评价范文
2014/01/24 职场文书
酒店营销策划方案
2014/02/07 职场文书
2014年三八妇女节活动总结
2014/03/01 职场文书
给校长的建议书
2014/03/12 职场文书
《一个小村庄的故事》教学反思
2014/04/13 职场文书
教师节宣传方案
2014/05/23 职场文书
小班教师个人总结
2015/02/05 职场文书
英语投诉信范文
2015/07/03 职场文书
MySQL 如何设计统计数据表
2021/06/15 MySQL
swagger如何返回map字段注释
2021/07/03 Java/Android
gateway与spring-boot-starter-web冲突问题的解决
2021/07/16 Java/Android