jQuery的css() 方法使用指南

所属分类: 网络编程 / JavaScript 阅读数: 1132
收藏 0 赞 0 分享

定义和用法

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 this关键字指向常用情况解析

这篇文章主要介绍了JavaScript this关键字指向常用情况解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
收藏 0 赞 0 分享

Vue-cli打包后如何本地查看的操作

这篇文章主要介绍了Vue-cli打包后如何本地查看的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

vue cli 3.0通用打包配置代码,不分一二级目录

这篇文章主要介绍了vue cli 3.0通用打包配置代码,不分一二级目录,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JavaScript事件循环及宏任务微任务原理解析

这篇文章主要介绍了JavaScript事件循环及宏任务微任务原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
收藏 0 赞 0 分享

关于vue-cli3打包代码后白屏的解决方案

这篇文章主要介绍了关于vue-cli3打包代码后白屏的解决方案,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

vue打包静态资源后显示空白及static文件路径报错的解决

这篇文章主要介绍了vue打包静态资源后显示空白及static文件路径报错的解决,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

vue-cli3访问public文件夹静态资源报错的解决方式

这篇文章主要介绍了vue-cli3访问public文件夹静态资源报错的解决方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS继承实现方法及优缺点详解

这篇文章主要介绍了JS继承实现方法及优缺点详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
收藏 0 赞 0 分享

vue或react项目生产环境去掉console.log的操作

这篇文章主要介绍了vue或react项目生产环境去掉console.log的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题

这篇文章主要介绍了解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享
查看更多