jQuery的css() 方法使用指南

定义和用法

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"
});

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

(0)

相关推荐

  • jQuery - css() 方法示例详解

    css() 方法设置或返回被选元素的一个或多个样式属性. 设置 CSS 属性 如需设置指定的 CSS 属性,请使用如下语法: 复制代码 代码如下: css("propertyname","value"); 下面的例子将为所有匹配元素设置 background-color 值: 实例 复制代码 代码如下: $("p").css("background-color","yellow"); 设置多个 CSS 属性

  • jQuery CSS()方法改变现有的CSS样式

    jQuery入门实例:使用CSS()方法改变现有的CSS样式表,css()方法在使用上具有多样性.其中有一种可接受两个输入参数:样式属性和样式值,两者之间用逗号分隔.比如要改变链接颜色,可以这样编写代码: $("#61dh a").css('color','#123456'); //选择器'$("#61dh a")'表示ID为'#61dh'的元素下的所有链接. //.css('color','#123456');表示把颜色设为'#123456' 如果需要改变多个样式

  • jQuery的css()方法用法实例

    本文实例讲述了jQuery的css()方法用法.分享给大家供大家参考.具体分析如下: 此方法返回或设置匹配元素的一个或多个样式属性. 语法结构: 语法一: 取得指定样式属性的属性值. 以样式属性名称作为参数.例如: 复制代码 代码如下: $("div").css("color") 以上代码能够获取div的字体颜色值. 代码实例: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta c

  • jQuery css() 方法动态修改CSS属性

    我们先来看个实例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>添加和删除类</title> <style> div{width: 500px;height: 500px;background: #1c94c4;} button{width: 80px;height: 40px;margin

  • jQuery CSS()方法改变现有的CSS样式表

    使用CSS()方法改变现有的CSS样式表,css()方法在使用上具有多样性.其中有一种可接受两个输入参数:样式属性和样式值,两者之间用逗号分隔.比如要改变链接颜色,可以这样编写代码: $("#61dh a").css('color','#123456'); //选择器'$("#61dh a")'表示ID为'#61dh'的元素下的所有链接. //.css('color','#123456');表示把颜色设为'#123456' 如果需要改变多个样式属性,可先定义属性变量

  • jQuery使用CSS()方法给指定元素同时设置多个样式

    本文实例讲述了jQuery使用CSS()方法给指定元素同时设置多个样式的方法.分享给大家供大家参考.具体如下: <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $(

  • jQuery的css() 方法使用指南

    定义和用法 css() 方法返回或设置匹配的元素的一个或多个样式属性. 返回 CSS 属性值 返回第一个匹配元素的 CSS 属性值. 注释:当用于返回一个值时,不支持简写的 CSS 属性(比如 "background" 和 "border"). 复制代码 代码如下: $(selector).css(name) name 必需.规定 CSS 属性的名称.该参数可包含任何 CSS 属性.比如 "color". 实例 取得第一个段落的 color 样式

  • JavaScript使用链式方法封装jQuery中CSS()方法示例

    本文实例讲述了JavaScript使用链式方法封装jQuery中CSS()方法.分享给大家供大家参考,具体如下: 主要思路就是:返回this对象,将所获取的操作元素放入一个数组中.在原型中添加拓展方法 <html> <head> <title></title> </head> <body> <div id="one">aa</div> </body> <script typ

  • Jquery使用css方法改变样式实例

    本文实例讲述了Jquery使用css方法改变样式.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &

  • jQuery HTML css()方法与css类实例详解

    本文实例讲述了jQuery HTML css()方法与css类.分享给大家供大家参考,具体如下: jQuery css() 方法 返回 CSS 属性 如需返回指定的 CSS 属性的值,请使用如下语法: css("propertyname"); 下面的例子将返回首个匹配元素的 background-color 值: $("p").css("background-color");//只获取 了一个背景颜色 //获取多个 <body> &l

  • jQuery(1.6.3) 中css方法对浮动的实现缺陷分析

    jQuery的css方法统一了两种写法,直接使用float属性即可,如下css方法中传参数"float"即可以设置也可以获取元素的float. 复制代码 代码如下: <div id="d1">float div</div> <script type="text/javascript"> $('#d1').css('float', 'right'); var str = $('#d1').css('float')

  • js实现封装jQuery的简单方法与链式操作详解

    我用这篇文章来理一理如何用js去实现封装jQuery的简单方法. 本文js实现了下面jquery的几种方法,我将它分为8个小目标 实现$(".box1").click( )方法 实现$("div").click( )方法 考虑$( )中参数的三种情况 实现jq中的on方法 实现链式操作 实现jq中的eq方法 实现jq中的end方法 实现jq中的css方法 有不正确的地方还望大家在评论区指出来,谢谢啦. 1. 实现$(".box1").click(

  • JQuery结合CSS操作打印样式的方法

    本节内容:JQuery.CSS操作打印样式. 一.添加打印样式 1,为屏幕显示和打印分别准备一个css文件,如下所示:  用于屏幕显示的css: 复制代码 代码如下: <link rel="stylesheet" href="css/mainstylesheet.css" media="screen" /> 用于打印的css: 复制代码 代码如下: <link rel="stylesheet" href=&q

随机推荐