`
liuxiang822
  • 浏览: 46445 次
  • 性别: Icon_minigender_1
  • 来自: 常州
社区版块
存档分类
最新评论

jQuery 获取和设置匹配元素样式属性值css

阅读更多

通过jQuery内的CSS样式操作方法,可以访问或设置DOM元素的级联样式

1、css(key, value) 在所有匹配的元素中,设置一个样式属性的值。

示例:

把所有段落的color样式属性值改为红色。

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

HTML 代码:

<p>Test Paragraph.</p>

结果:

<p style="color:red;">Test Paragraph.</p>

2、css(name) 访问第一个匹配元素的样式属性。使用这个方法可以很容易地取得第一个匹配元素的样式属性的值。

示例:

取得第一个段落的color样式属性的值。

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

HTML 代码:

<p style="color:red;">Test Paragraph.</p>

结果:

"red"

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

示例:

为所有p元素设置color和background样式属性。

$("p").css({ color: "red", background: "blue" });

HTML 代码:

<p>Test Paragraph.</p>

结果:

<p style="color:red; background:blue;">Test Paragraph.</p>

4、height(val) 为每个匹配的元素设置CSS高度(width)属性的值。如果没有明确指定单位(如:em或%),使用px。

示例:

$("p").height(20);

HTML 代码:

<p>This is just a test.</p>

结果:

<p style="height:20px;">This is just a test.</p>

示例:

$("p").height("20em");

HTML 代码:

<p>This is just a test.</p>

结果:

<p style="height:20em;">This is just a test.</p>

5、height() 取得第一个匹配元素当前计算的高度值(px)。

示例:

$("p").height();

HTML 代码:

<p>This is just a test.</p>

结果:

300

6、width(val) 为每个匹配的元素设置CSS宽度(width)属性的值。如果没有明确指定单位(如:em或%),使用px。

示例:

$("p").width(20);

HTML 代码:

<p>This is just a test.</p>

结果:

<p style="width:20px;">This is just a test.</p>

示例:

$("p").width("20em");

HTML 代码:

<p>This is just a test.</p>

结果:

<p style="width:20em;">This is just a test.</p>

7、width() 取得第一个匹配元素当前计算的宽度值(px)。

示例:

$("p").width();

HTML 代码:

<p>This is just a test.</p>

结果:

300

分享到:
评论

相关推荐

    jQuery详细教程

    $("[href$='.jpg']") 所有带有以 ".jpg" 结尾的属性值的 href 属性 $("div#intro .head") id="intro" 的 &lt;div&gt; 元素中的所有 class="head" 的元素 三. jQuery 事件函数 jQuery 事件处理方法是 jQuery 中的核心函数...

    Jquery css函数用法(判断标签是否拥有某属性)

    把一个“名/值对”对象设置为所有匹配元素的样式属性。 这是一种在所有匹配的元素上设置大量样式属性的最佳方式 代码如下:$(“p”).css({ color: “#ff0011”, background: “blue” }); 如果属性名包含 “-“的话...

    jquery 操作css样式、位置、尺寸方法汇总

    把一个“名/值对”对象设置为所有匹配元素的样式属性。这是一种在所有匹配的元素上设置大量样式属性的最佳方式。 返回值 jQuery 参数 properties (Map) : 要设置为样式属性的名/值对 示例: 代码如下: //1 将...

    jQuery的css() 方法使用指南

    返回第一个匹配元素的 CSS 属性值。 注释:当用于返回一个值时,不支持简写的 CSS 属性(比如 “background” 和 “border”)。 代码如下: $(selector).css(name) name 必需。规定 CSS 属性的名称。该参数可包含...

    jQuery css() 方法

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

    jQuery 1.9.1源码分析系列(十三)之位置大小操作

    jQuery.fn.css (propertyName [, value ]| object )(函数用于设置或返回当前jQuery对象所匹配的元素的css样式属性值。如果需要删除指定的css属性,请使用该函数将其值设为空字符串(“”)  注意:1、如果省略了...

    JQuery1.3笔记.txt

    在匹配元素后面添加内容 $("元素名称").append(content); 将content作为元素的内容插入到该元素的后面 $("元素名称").appendTo(content); 在content后接元素 $("元素名称").before(content); 与after方法相反 $(...

    jquery+事件方法大全

    在匹配元素后面添加内容 $("元素名称").append(content); 将content 作为元素的内容插入到该元素的 后面 $("元素名称").appendTo(content); 在content 后接元素 $("元素名称").before(content); 与after 方法...

    jQuery – css() 方法示例详解

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

    jQuery的css()方法用法实例

    此方法返回或设置匹配元素的一个或多个样式属性。 语法结构: 语法一: 取得指定样式属性的属性值。 以样式属性名称作为参数。例如: 代码如下:$(“div”).css(“color”) 以上代码能够获取div的字体颜色值。 代码实例...

    jQuery完全实例.rar

    意味着,每次执行传递进来的函数时,函数中的this关键字都指向一个不同的DOM元素(每次都是一个不同的匹配元素)。 而且,在每次执行函数时,都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置...

    jquery插件使用方法大全

    当侦测到成功的响应时(比如,当 textStatus 为 "success" 或 "notmodified" 时),.load() 将匹配元素的 HTML 内容设置为返回的数据。这意味着该方法的大多数使用会非常简单。 编辑本段ajax  这是一个ajax横行的...

    juqery 学习之六 CSS–css、位置、宽高

    css(name) 访问第一个匹配... ————————————————————————————————————————————————- css(properties) 把一个“名/值对”对象设置为所有匹配元素的样式属性。 这是一种

    jquery电子文档chm

    访问第一个匹配元素的样式属性。 -------------------------------------------------------------------------------- Return a style property on the first matched element. 返回值 String 参数 name (String...

    Jquery 基础学习笔记

    1、属性: 为所有匹配的元素设置一个计算的属性值 //为所有的input添加属性class=”btn” //$(“input”).attr(“class”,”btn”); 2、CSS:为每个匹配的元素添加指定的类名 //对所有的提交按钮添加样式 $(“input:...

    JavaScript权威指南(第六版) 清晰-完整

    6.2 属性的查询和设置 6.3 删除属性 6.4 检测属性 6.5 枚举属性 6.6 属性getter和setter 6.7 属性的特性 6.8 对象的三个属性 6.9 序列化对象 6.10 对象方法 第7章 数组 7.1 创建数组 7.2 数组元素的读和写 7.3 稀疏...

    JavaScript权威指南(第6版)(中文版)

    6.2 属性的查询和设置 6.3 删除属性 6.4 检测属性 6.5 枚举属性 6.6 属性getter和setter 6.7 属性的特性 6.8 对象的三个属性 6.9 序列化对象 6.10 对象方法 第7章 数组 7.1 创建数组 7.2 数组元素的读和写 7.3 稀疏...

    JavaScript权威指南(第6版)

    6.2 属性的查询和设置 6.3 删除属性 6.4 检测属性 6.5 枚举属性 6.6 属性getter和setter 6.7 属性的特性 6.8 对象的三个属性 6.9 序列化对象 6.10 对象方法 第7章 数组 7.1 创建数组 7.2 数组元素的读和写 7.3 稀疏...

Global site tag (gtag.js) - Google Analytics