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 相关文章推荐
jquery.AutoComplete.js中文修正版(支持firefox)
Apr 09 Javascript
让textarea自动调整大小的js代码
Apr 12 Javascript
jquery中animate动画积累的解决方法
Oct 05 Javascript
jQuery中has()方法用法实例
Jan 06 Javascript
一个非常好用的文字滚动的案例,鼠标悬浮可暂停[两种方案任选]
Dec 01 Javascript
d3.js入门教程之数据绑定详解
Apr 28 Javascript
详解Vue微信公众号开发踩坑全记录
Aug 21 Javascript
Vue精简版风格概述
Jan 30 Javascript
vue.js轮播图组件使用方法详解
Jul 03 Javascript
JavaScript修改注册表实例代码
Jan 05 Javascript
vue-cli3项目配置eslint代码规范的完整步骤
Sep 10 Javascript
js闭包的9个使用场景
Dec 29 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
萌王史莱姆”萌王性别尴尬!那“萌战”归女组还是男?
2018/12/17 日漫
使用 MySQL Date/Time 类型
2008/03/26 PHP
PHP 5.0对象模型深度探索之类的静态成员
2008/03/27 PHP
114啦源码(114la)不能生成地方房产和地方报刊问题4级页面0字节的解决方法
2012/01/12 PHP
PHP利用str_replace防注入的方法
2013/11/10 PHP
ThinkPHP写数组插入与获取最新插入数据ID实例
2014/11/03 PHP
jQuery+jqmodal弹出窗口实现代码分明
2010/06/14 Javascript
javascript:文字不间断向左移动的实例代码
2013/08/08 Javascript
jquery实现的代替传统checkbox样式插件
2015/06/19 Javascript
js实现黑色简易的滑动门网页tab选项卡效果
2015/08/31 Javascript
js贪吃蛇游戏实现思路和源码
2016/04/14 Javascript
JS实现两周内自动登录功能
2017/03/23 Javascript
Vue.js实现按钮的动态绑定效果及实现代码
2017/08/21 Javascript
微信小程序顶部可滚动导航效果
2017/10/31 Javascript
JavaScript实现一个带AI的井字棋游戏源码
2018/05/21 Javascript
微信小程序全局变量的设置、使用、修改过程解析
2019/09/24 Javascript
jquery 键盘事件 keypress() keydown() keyup()用法总结
2019/10/23 jQuery
Vue中使用matomo进行访问流量统计的实现
2019/11/05 Javascript
[49:05]OG vs Newbee 2019DOTA2国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
Python 调用DLL操作抄表机
2009/01/12 Python
python实现下载整个ftp目录的方法
2017/01/17 Python
Python基于辗转相除法求解最大公约数的方法示例
2018/04/04 Python
Python常见排序操作示例【字典、列表、指定元素等】
2018/08/15 Python
基于numpy中的expand_dims函数用法
2019/12/18 Python
Python flask路由间传递变量实例详解
2020/06/03 Python
python访问hdfs的操作
2020/06/06 Python
Python selenium爬虫实现定时任务过程解析
2020/06/08 Python
Django Model层F,Q对象和聚合函数原理解析
2020/11/12 Python
英国手机壳购买网站:Case Hut
2019/04/11 全球购物
PHP笔试题
2012/02/22 面试题
市场营销方案范文
2014/03/11 职场文书
小兵张嘎观后感300字
2015/06/03 职场文书
单独二胎证明
2015/06/24 职场文书
伊索寓言读书笔记
2015/06/30 职场文书
Spring boot admin 服务监控利器详解
2022/08/05 Java/Android
Li list-style-image 图片垂直居中实现方法
2023/05/21 HTML / CSS