jQuery css类

$(selecor).css(name)

css()方法返回或设置匹配元素的一个或多个样式属性。

设置<p>元素的颜色：

$(".button").click(function(){
  $("p").css("color","red");
});

 使用函数来设置css属性

$(selector).css(name,function(index,value))
//此函数返回要设置的属性值。接受两个参数，index 为元素在对象集合中的索引位置，value 是原先的属性值。

 例如将所有段落的颜色设为黄色

$("button").click(function(){
    $("p").css("color",function(){return "yellow";});
    });

 逐渐增加div的宽度

$("div").click(function() {
  $(this).css(
    "width", function(index, value) {return parseFloat(value) * 1.2;}
  );
});

 设置多个css属性

$(selector).css({property:value, property:value, ...})

 例如

$("button").click(function(){
    $("p").css({
      "color":"white",
      "background-color":"#98bf21",
      "font-family":"Arial",
      "font-size":"20px",
      "padding":"5px"
    });
  });
});

 

 jQuery width(),height()

 

 width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。

 

height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。

$("button").click(function(){
  var txt="";
  txt+="Width: " + $("#div1").width() + "</br>";
  txt+="Height: " + $("#div1").height();
  $("#div1").html(txt);
});
//返回<div>的高度宽度

 jQuery innerWidth(),innerHeight()方法

innerWidth()返回元素的宽度(包括内边距)

innerHidth()返回元素的高度(包括内边距)

$("button").click(function(){
    var txt="";
    txt+="Width of div: " + $("#div1").width() + "</br>";
    txt+="Height of div: " + $("#div1").height() + "</br>";
    txt+="Inner width of div: " + $("#div1").innerWidth() + "</br>";
    txt+="Inner height of div: " + $("#div1").innerHeight();
    $("#div1").html(txt);