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

class="fn1">$(this).height(“200px”); 当鼠标单击ID等于ht1的元素此元素的高度将变成

200px

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

width(val)

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

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “

href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-

transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-

transitional.dtd“>
<html xmlns=”

href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml“>
<head>

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

</title>
<script language=”javascript” src=”

href="http://www.cnjquery.com/demo/jquery.js%22%3E%

3C/script">http://www.cnjquery.com/demo/jquery.js”></script>
<style>

r
.redborder{border:2px dashed #ff0000 }
</style>
<SCRIPT

LANGUAGE=”JavaScript”>
<!–
$(document).ready(function() {

$(“div”).addClass(“redborder”);
$(“#css1″).click(function(){
$(this).css

(“border”,”2px dashed #000000″);
})
$(“#css2″).click(function(){

$(this).css(“border”,”2px dashed #6600FF”);
alert($(this).css(“border”));

})
$(“#css3″).click(function(){
$(this).css({ color: “red”, background:

“blue” });
})
$(“#ht1″).click(function(){
$(this).height

(“200px”);
alert($(this).height());
})
})
//–

>
</SCRIPT>
</head>
<body>
css(key, value) 在所有匹配的元

素中，设置一个样式属性的值。
<div ID=css1>jquery基础教程四(css的操作之css,height和

width) 当鼠标点击执行 $(this).css(“border”,”2px dashed

#000000″);</div><br><br>
css(name) 访问第一个匹配元素的样式属性。使用

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

class="fn1"><div ID=css2>jquery基础教程四(css的操作之css,height和

width) 当鼠标点击执行 $(this).css(“border”,”10px dashed #6600FF”); alert($(this).css

(“border”));</div><br><br>
css(properties)把一个“名/值对”对象设置为

所有匹配元素的样式属性。这是一种在所有匹配的元素上设置大量样式属性的最佳方式

<div ID=css3>jquery基础教程

四(css的操作之css,height和width) 当鼠标点击执行 $(this).css({ color: “red”, background:

“blue” }); </div><br><br>

class="fn1">height(val)为每个匹配的元素设置CSS高度(height)属性的值。如果没有明确指定单位（

如：em或%），使用px。

<div

ID=ht1>jquery基础教程四(css的操作之css,height和width) 当鼠标点击执行 $(this).height

(“200px”);alert($(this).height());

</div><br><br>
</body>
</html>

jquery傻瓜教程四(css操作之css,height和width)

jquery傻瓜教程四(css操作之 css,height和width)

jquery傻瓜教程四(css操作之

css,height和width)