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操作web控件的自定义属性
Nov 25 Javascript
JavaScript实现仿网易通行证表单验证
May 25 Javascript
jQuery遮罩层效果实例分析
Jan 14 Javascript
Bootstrap Metronic完全响应式管理模板学习笔记
Jul 08 Javascript
jQuery实现div横向拖拽排序的简单实例
Jul 13 Javascript
使用BootStrap实现用户登录界面UI
Aug 10 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(上)
Apr 21 Javascript
ES6下React组件的写法示例代码
May 04 Javascript
前端常见跨域解决方案(全)
Sep 19 Javascript
JavaScript实现全选取消效果
Dec 14 Javascript
微信小程序methods中定义的方法互相调用的实例代码
Aug 07 Javascript
vue $mount 和 el的区别说明
Sep 11 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分多步骤填写发布信息的简单方法实例代码
2012/09/23 PHP
Fine Uploader文件上传组件应用介绍
2013/01/06 PHP
浅析PHP中的字符串编码转换(自动识别原编码)
2013/07/02 PHP
php四种基础算法代码实例
2013/10/29 PHP
php实现scws中文分词搜索的方法
2015/12/25 PHP
PHP的HTTP客户端Guzzle简单使用方法分析
2019/10/30 PHP
js 禁止选择功能实现代码(兼容IE/Firefox)
2010/04/23 Javascript
js中document.getElementByid、document.all和document.layers区分介绍
2011/12/08 Javascript
js 可拖动列表实现代码
2011/12/13 Javascript
基于jQuery的获取标签名的代码
2012/07/16 Javascript
JavaScript异步编程Promise模式的6个特性
2014/04/03 Javascript
jquery的trigger和triggerHandler的区别示例介绍
2014/04/20 Javascript
jQuery实现tab标签自动切换的方法
2015/02/28 Javascript
javascript中call apply 的应用场景
2015/04/16 Javascript
BootStrap入门教程(一)之可视化布局
2016/09/19 Javascript
微信小程序之picker日期和时间选择器
2017/02/09 Javascript
妙用Angularjs实现表格按指定列排序
2017/06/23 Javascript
JavaScript基本语法_动力节点Java学院整理
2017/06/26 Javascript
vue.js实现的全选与全不选功能示例【基于elementui】
2018/12/03 Javascript
js实现简易计算器功能
2019/10/18 Javascript
使用js获取身份证年龄的示例代码
2020/12/11 Javascript
[01:15:44]首部DOTA2纪录片今日23时全网上映
2014/03/19 DOTA
python操作MongoDB基础知识
2013/11/01 Python
Python多线程、异步+多进程爬虫实现代码
2016/02/17 Python
Python第三方库xlrd/xlwt的安装与读写Excel表格
2017/01/21 Python
python监控linux内存并写入mongodb(推荐)
2017/09/11 Python
python下实现二叉堆以及堆排序的示例
2017/09/29 Python
Python中static相关知识小结
2018/01/02 Python
Python常见字符串操作函数小结【split()、join()、strip()】
2018/02/02 Python
Django 开发环境配置过程详解
2019/07/18 Python
django商品分类及商品数据建模实例详解
2020/01/03 Python
html5 postMessage前端跨域并前端监听的方法示例
2018/11/01 HTML / CSS
探亲假请假条
2014/04/11 职场文书
pygame面向对象的飞行小鸟实现(Flappy bird)
2021/04/01 Python
解决Golang time.Parse和time.Format的时区问题
2021/04/29 Golang
python 解决微分方程的操作(数值解法)
2021/05/26 Python