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 相关文章推荐
JavaScript Accessor实现说明
Dec 06 Javascript
nullJavascript中创建对象的五种方法实例
May 07 Javascript
基于jquery扩展漂亮的下拉框可以二次修改
Nov 19 Javascript
将json对象转换为字符串的方法
Feb 20 Javascript
回车直接实现点击某按钮的效果即触发单击事件
Feb 27 Javascript
JavaScript中switch判断容易犯错的一个细节
Aug 27 Javascript
Node.js设置CORS跨域请求中多域名白名单的方法
Mar 28 Javascript
jQuery复合事件用法示例
Jun 10 jQuery
Vue 2.5.2下axios + express 本地请求404的解决方法
Feb 21 Javascript
js实现无缝滚动双图切换效果
Jul 09 Javascript
微信小程序清空输入框信息与实现屏幕往上滚动的示例代码
Jun 23 Javascript
移动端JS实现拖拽两种方法解析
Oct 12 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
php实例分享之二维数组排序
2014/05/15 PHP
php中的explode()函数实例介绍
2019/01/18 PHP
如何确保JavaScript的执行顺序 之jQuery.html深度分析
2011/03/03 Javascript
javascript中普通函数的使用介绍
2013/12/19 Javascript
动态的绑定事件addEventListener方法的使用
2014/01/24 Javascript
javascript使用正则表达式检测IP地址
2014/12/03 Javascript
javascript闭包的理解
2015/04/01 Javascript
JavaScript电子时钟倒计时
2016/01/09 Javascript
Angularjs实现多个页面共享数据的方式
2016/03/29 Javascript
javaScript数组迭代方法详解
2016/04/14 Javascript
BootStrap glyphicons 字体图标实现方法
2016/05/01 Javascript
用JS实现图片轮播效果代码(一)
2016/06/26 Javascript
用JS写的一个Ajax库(实例代码)
2016/08/06 Javascript
真正好用的js验证上传文件大小的简单方法
2016/10/27 Javascript
ASP.NET jquery ajax传递参数的实例
2016/11/02 Javascript
Vue.set() this.$set()引发的视图更新思考及注意事项
2018/08/30 Javascript
Vue基于vuex、axios拦截器实现loading效果及axios的安装配置
2019/04/26 Javascript
Vue双向数据绑定(MVVM)的原理
2020/10/03 Javascript
vue element实现表格合并行数据
2020/11/30 Vue.js
[01:18]PWL开团时刻DAY4——圣剑与抢盾
2020/11/03 DOTA
python time模块用法实例详解
2014/09/11 Python
python实现分析apache和nginx日志文件并输出访客ip列表的方法
2015/04/04 Python
python不换行之end=与逗号的意思及用途
2017/11/21 Python
用python处理MS Word的实例讲解
2018/05/08 Python
浅谈keras的深度模型训练过程及结果记录方式
2020/01/24 Python
Python数据结构dict常用操作代码实例
2020/03/12 Python
纯css3制作网站后台管理面板
2014/12/30 HTML / CSS
HTML5 离线应用之打造零请求、无流量网站的解决方法
2013/04/25 HTML / CSS
谷歌浏览器小字体处理方案即12px以下字体
2013/12/17 HTML / CSS
十八届三中全会感言
2014/03/10 职场文书
房屋出租协议书
2014/04/10 职场文书
《云房子》教学反思
2014/04/20 职场文书
法务专员岗位职责
2015/02/14 职场文书
小学生安全教育主题班会
2015/08/12 职场文书
读《儒林外史》有感:少一些功利,多一些真诚
2020/01/19 职场文书
golang用type-switch判断interface的实际存储类型
2022/04/14 Golang