hao_2468

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::
4 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)

我们看看下面代码
  1. $("#css1").click(function(){
  2.    $(this).css("border","2px dashed #000000");
  3. })
复制代码
当鼠标单击ID等于css1的元素 此元素的border属性设置成 "2px dashed #000000"

css(name)
  1. $("#css2").click(function(){
  2.    $(this).css("border","2px dashed #6600FF");
  3.    alert($(this).css("border"));
  4. })
  6. $(this).css("border","2px dashed #6600FF");
复制代码
当鼠标单击ID等于css2的元素 此元素的border属性设置成 "2px dashed #6600FF"
  1. alert($(this).css("border"));
复制代码
获得border的属性值.

css(properties)
  1. $("#css3").click(function(){
  2.    $(this).css({ color: "red", background: "blue" });
  3. })
复制代码
当鼠标单击ID等于css3的元素 样式color为red background为blue


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

height(val)

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

height()

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

height(val)
  1. $("#ht1").click(function(){
  2.    $(this).height("200px");
  3. alert($(this).height());
  4. })
  5. $(this).height("200px"); 当鼠标单击ID等于ht1的元素 此元素的高度将变成200px
  7. alert($(this).height());显示height的值
复制代码
width(val) width() 和height是一样的 只不过就是设置宽度.这里就不多说了.
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>jquery基础教程四(css的操作之css,height和width)</title>
  6. <script language="javascript" src="jquery.js"></script>
  7. <style>
  8. .redborder{border:2px dashed #ff0000 }
  9. </style>
  10. <SCRIPT LANGUAGE="JavaScript">
  11. <!--
  12. $(document).ready(function() {
  13. $("div").addClass("redborder");
  14. $("#css1").click(function(){
  15.    $(this).css("border","2px dashed #000000");
  16. })
  17. $("#css2").click(function(){
  18.    $(this).css("border","2px dashed #6600FF");
  19.    alert($(this).css("border"));
  20. })
  21. $("#css3").click(function(){
  22.    $(this).css({ color: "red", background: "blue" });
  23. })
  24.     $("#ht1").click(function(){
  25.    $(this).height("200px");
  26. alert($(this).height());
  27. })
  28. })
  29. //-->
  30. </SCRIPT>
  31. </head>
  32. <body>
  33. css(key, value) 在所有匹配的元素中，设置一个样式属性的值。
  34. <div ID=css1>jquery基础教程四(css的操作之css,height和width) 当鼠标点击 执行 $(this).css("border","2px dashed #000000");</div><br><br>
  35. css(name) 访问第一个匹配元素的样式属性。使用这个方法可以很容易地取得第一个匹配元素的样式属性的值。
  37. <div ID=css2>jquery基础教程四(css的操作之css,height和width) 当鼠标点击 执行 $(this).css("border","10px dashed #6600FF"); alert($(this).css("border"));</div><br><br>
  38. css(properties)把一个“名/值对”对象设置为所有匹配元素的样式属性。 这是一种在所有匹配的元素上设置大量样式属性的最佳方式
  40. <div ID=css3>jquery基础教程四(css的操作之css,height和width) 当鼠标点击 执行 $(this).css({ color: "red", background: "blue" }); </div><br><br>
  42. height(val)为每个匹配的元素设置CSS高度(height)属性的值。如果没有明确指定单位（如：em或%），使用px。
  45. <div ID=ht1>jquery基础教程四(css的操作之css,height和width) 当鼠标点击 执行 $(this).height("200px");alert($(this).height()); </div><br><br>
  46. </body>
  47. </html>
posted on 2010-04-01 16:58  hao_2468  阅读(531)  评论(0)  编辑  收藏  举报