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类库D
Oct 24 Javascript
JS判断浏览器是否支持某一个CSS3属性的方法
Oct 17 Javascript
Javascript检查图片大小不要让大图片撑破页面
Nov 04 Javascript
jQuery基础知识小结
Dec 22 Javascript
jQuery 移动端artEditor富文本编辑器
Jan 11 Javascript
javascript 数组的定义和数组的长度
Jun 07 Javascript
URL的参数中有加号传值变为空格的问题(URL特殊字符)
Nov 04 Javascript
详解JavaScript按概率随机生成事件
Aug 02 Javascript
JavaScript框架Angular和React深度对比
Nov 20 Javascript
jQuery length 和 size()区别总结
Apr 26 jQuery
Vue+Vuex实现自动登录的知识点详解
Mar 04 Javascript
解决element-ui的下拉框有值却无法选中的情况
Nov 07 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
ajax在joomla中的原生态应用代码
2012/07/19 PHP
ThinkPHP快速入门实例教程之数据分页
2014/07/01 PHP
php的api数据接口书写实例(推荐)
2016/09/22 PHP
Ecshop 后台添加新功能栏目及管理权限设置教程
2017/11/21 PHP
PHP添加文字水印或图片水印的水印类完整源代码与使用示例
2019/03/18 PHP
PHP7 错误处理机制修改
2021/03/09 PHP
脚本之家贴图转换+转贴工具用到的js代码超级推荐
2007/04/05 Javascript
定义select的边框颜色
2008/04/28 Javascript
Javascript 读后台cookie代码
2008/09/15 Javascript
JS学习之一个简易的日历控件
2010/03/24 Javascript
js 替换功能函数,用正则表达式解决,js的全部替换
2010/12/08 Javascript
jquery连缀语法如何实现
2012/11/29 Javascript
JS获取地址栏参数的小例子
2013/08/23 Javascript
通过node-mysql搭建Windows+Node.js+MySQL环境的教程
2016/03/01 Javascript
vue 过滤器filter实例详解
2018/03/14 Javascript
react中实现搜索结果中关键词高亮显示
2018/07/31 Javascript
JS实现获取毫秒值及转换成年月日时分秒的方法
2018/08/15 Javascript
mpvue项目中使用第三方UI组件库的方法
2018/09/30 Javascript
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
2019/01/29 Javascript
JavaScript实现的九种排序算法
2019/03/04 Javascript
JavaScript 面向对象程序设计详解【类的创建、实例对象、构造函数、原型等】
2020/05/12 Javascript
python求素数示例分享
2014/02/16 Python
python3抓取中文网页的方法
2015/07/28 Python
Python2.7基于淘宝接口获取IP地址所在地理位置的方法【测试可用】
2017/06/07 Python
Python实现针对json中某个关键字段进行排序操作示例
2018/12/25 Python
Tensorflow Summary用法学习笔记
2020/01/10 Python
python文件及目录操作代码汇总
2020/07/08 Python
CSS3解决移动页面上点击链接触发色块的问题
2016/06/03 HTML / CSS
英国领先的在线旅游和休闲零售商:lastminute.com
2019/01/23 全球购物
加拿大品牌鞋包连锁店:Little Burgundy
2021/02/28 全球购物
27个经典Linux面试题及答案,你知道几个?
2013/01/10 面试题
cf战队收人广告词
2014/03/14 职场文书
优秀护士先进事迹
2014/05/08 职场文书
收入证明怎么写
2015/06/12 职场文书
2016年学校党支部公开承诺书
2016/03/25 职场文书
关于@OnetoMany关系映射的排序问题,使用注解@OrderBy
2021/12/06 Java/Android