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是一样的 只不过就是设置宽度.这里就不多说了.

修改边框属性

显示边框属性

修改div北京

修改长和高