jquery基础教程四(css的操作之css,height和width)

上面我们了jquery 的 addClass和removeClass方法

下面我们来看看 css,height和width
首先我们看看 css(key, value)和css(name)

css(key, value)

在所有匹配的元素中，一个样式属性的值。

css(name)

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

css(properties)

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

首先我们看看

css(key, value)

我们看看下面代码

$("#css1").click(function(){
       $(this).css("border","2px dashed #000000");
    })

当鼠标单击ID等于css1的元素 此元素的border属性设置成 "2px dashed #000000"

css(name)

$("#css2").click(function(){
       $(this).css("border","2px dashed #6600FF");
       alert($(this).css("border"));
    })

$(this).css("border","2px dashed #6600FF");

当鼠标单击ID等于css2的元素 此元素的border属性设置成 "2px dashed #6600FF"

alert($(this).css("border"));

获得border的属性值.

css(properties)

$("#css3").click(function(){
       $(this).css({ color: "red", background: "blue" });
    })

当鼠标单击ID等于css3的元素 样式color为red background为blue


下面我们看看height和width用法 其实从单词意思上也应该知道的差不多

height(val)

为每个匹配的元素设置CSS高度(height)属性的值。如果没有明确指定单位（如：em或%），使用px。

height()

取得第一个匹配元素当前计算的高度值（px）。

height(val)

$("#ht1").click(function(){
       $(this).height("200px");
    alert($(this).height());
    })
$(this).height("200px"); 当鼠标单击ID等于ht1的元素 此元素的高度将变成200px

alert($(this).height());显示height的值

width(val)width()和height是一样的 只不过就是设置宽度.这里就不多说了.











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

jquery基础教程四(css的操作之css,height和width) 当鼠标点击 执行 $(this).css("border","2px dashed #000000");

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

jquery基础教程四(css的操作之css,height和width) 当鼠标点击 执行 $(this).css("border","10px dashed #6600FF"); alert($(this).css("border"));

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

jquery基础教程四(css的操作之css,height和width) 当鼠标点击 执行 $(this).css({ color: "red", background: "blue" });

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

jquery基础教程四(css的操作之css,height和width) 当鼠标点击 执行 $(this).height("200px");alert($(this).height());

程序演示地址: