jQuery的css() 方法使用指南


Posted in Javascript onMay 03, 2015

定义和用法

css() 方法返回或设置匹配的元素的一个或多个样式属性。

返回 CSS 属性值

返回第一个匹配元素的 CSS 属性值。

注释:当用于返回一个值时,不支持简写的 CSS 属性(比如 "background" 和 "border")。

$(selector).css(name)

name 必需。规定 CSS 属性的名称。该参数可包含任何 CSS 属性。比如 "color"。

实例
取得第一个段落的 color 样式属性的值:

$("p").css("color");

设置 CSS 属性

设置所有匹配元素的指定 CSS 属性。

$(selector).css(name,value)

name 必需。规定 CSS 属性的名称。该参数可包含任何 CSS 属性,比如 "color"。

value 可选。规定 CSS 属性的值。该参数可包含任何 CSS 属性值,比如 "red"。

如果设置了空字符串值,则从元素中删除指定属性。

实例
将所有段落的颜色设为红色:

$("p").css("color","red");

使用函数来设置 CSS 属性

设置所有匹配的元素中样式属性的值。
此函数返回要设置的属性值。接受两个参数,index 为元素在对象集合中的索引位置,value 是原先的属性值。

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

name 必需。规定 CSS 属性的名称。该参数可包含任何 CSS 属性,比如 "color"。

function(index,value)

规定返回 CSS 属性新值的函数。
index - 可选。接受选择器的 index 位置
oldvalue - 可选。接受 CSS 属性的当前值。

实例 1
将所有段落的颜色设为红色:

$("button").click(function(){

$("p").css("color",function(){return "red";});

});

实例 2
逐渐增加 div 的宽度:

$("div").click(function() {

$(this).css(

"width", function(index, value) {return parseFloat(value) * 1.2;}

);

});

设置多个 CSS 属性/值对

$(selector).css({property:value, property:value, ...})

把“名/值对”对象设置为所有匹配元素的样式属性。
这是一种在所有匹配的元素上设置大量样式属性的最佳方式。

{property:value} 
必需。规定要设置为样式属性的“名称/值对”对象。
该参数可包含若干对 CSS 属性名称/值。比如 {"color":"red","font-weight":"bold"}

实例

$("p").css({

"color":"white",

"background-color":"#98bf21",

"font-family":"Arial",

"font-size":"20px",

"padding":"5px"

});

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
javascript 带有滚动条的表格,标题固定,带排序功能.
Nov 13 Javascript
Jquery中dialog属性小记
Sep 03 Javascript
php对mongodb的扩展(小试牛刀)
Nov 11 Javascript
JavaScript执行效率与性能提升方案
Dec 21 Javascript
轻松学习jQuery插件EasyUI EasyUI创建CRUD应用
Nov 30 Javascript
JS实现设置ff与ie元素绝对位置的方法
Mar 08 Javascript
手把手搭建安装基于windows的Vue.js运行环境
Jun 12 Javascript
vue集成百度UEditor富文本编辑器使用教程
Sep 21 Javascript
浅谈关于iview表单验证的问题
Sep 29 Javascript
angularJs提交文本框数据到后台的方法
Oct 08 Javascript
详解小程序中h5页面onShow实现及跨页面通信方案
May 30 Javascript
深入解读Node.js中的koa源码
Jun 17 Javascript
面向切面编程(AOP)的理解
May 01 #Javascript
yui3的AOP(面向切面编程)和OOP(面向对象编程)
May 01 #Javascript
使用AOP改善javascript代码
May 01 #Javascript
Javascript aop(面向切面编程)之around(环绕)分析
May 01 #Javascript
jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板
Apr 30 #Javascript
jQuery插件slider实现拖动滑块选取价格范围
Apr 30 #Javascript
javascript实现验证身份证号的有效性并提示
Apr 30 #Javascript
You might like
常用的php对象类型判断
2008/08/27 PHP
PHP、Nginx、Apache中禁止网页被iframe引用的方法
2020/10/01 PHP
PHP函数eval()介绍和使用示例
2014/08/20 PHP
php字符串按照单词进行反转的方法
2015/03/14 PHP
Laravel 5.5基于内置的Auth模块实现前后台登陆详解
2017/12/21 PHP
用JavaScript实现仿Windows关机效果
2007/03/10 Javascript
javascript Demo模态窗口
2009/12/06 Javascript
php gethostbyname获取域名ip地址函数详解
2010/01/24 Javascript
javascript仿php的print_r函数输出json数据
2013/09/13 Javascript
基于jquery实现导航菜单高亮显示(两种方法)
2015/08/23 Javascript
jQuery实现Meizu魅族官方网站的导航菜单效果
2015/09/14 Javascript
JS中如何比较两个Json对象是否相等实例代码
2016/07/13 Javascript
功能强大的Bootstrap效果展示(二)
2016/08/03 Javascript
详解vue-cli 快速搭建单页应用之遇到的问题及解决办法
2018/03/01 Javascript
React Component存在的几种形式详解
2018/11/06 Javascript
vue项目强制清除页面缓存的例子
2019/11/06 Javascript
[02:08]我的刀塔不可能这么可爱 胡晓桃_1
2014/06/20 DOTA
[46:57]EG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
布同自制Python函数帮助查询小工具
2011/03/13 Python
python比较2个xml内容的方法
2015/05/11 Python
Python的Django框架中设置日期和字段可选的方法
2015/07/17 Python
python使用itchat实现手机控制电脑
2018/02/22 Python
Python去除、替换字符串空格的处理方法
2018/04/01 Python
Python numpy中矩阵的基本用法汇总
2019/02/12 Python
Python 点击指定位置验证码破解的实现代码
2019/09/11 Python
Django3中的自定义用户模型实例详解
2020/08/23 Python
python实现数学模型(插值、拟合和微分方程)
2020/11/13 Python
CSS3实现同时执行倾斜和旋转的动画效果
2016/10/27 HTML / CSS
Clearly新西兰:购买眼镜、太阳镜和隐形眼镜
2018/04/26 全球购物
古驰英国官网:GUCCI英国
2020/03/07 全球购物
密封类可以有虚函数吗
2014/08/11 面试题
竞聘书格式及范文
2014/03/31 职场文书
婚礼长辈答谢词
2015/09/29 职场文书
初中体育课教学反思
2016/02/16 职场文书
选对餐饮营销策略,营业额才会上涨
2019/08/27 职场文书
彻底解决MySQL使用中文乱码的方法
2022/01/22 MySQL