JQuery之CSS函数

jQuery 拥有三种用于 CSS 操作的重要函数：

•      $(selector).css(name,value)
•      $(selector).css({properties})
•      $(selector).css(name)

 

 $(selector).css(name,value)用法示例：为所有匹配元素的给定 CSS 属性设置值

< html >
< head >
< script  type ="text/javascript"  src ="/jquery/jquery.js" ></ script >
< script  type ="text/javascript" >
$(document).ready( function(){
  $("button").click( function(){
    $("p").css("background-color","red");
  });
});
</ script >
</ head >

< body >
< h2 >This is a heading </ h2 >
< p >This is a paragraph. </ p >
< p >This is another paragraph. </ p >
< button  type ="button" >Click me </ button >
</ body >

</ html >  

$(selector).css({properties}) 用法示例：同时为所有匹配元素的一系列 CSS 属性设置值

< html >
< head >
< script  type ="text/javascript"  src ="/jquery/jquery.js" ></ script >
< script  type ="text/javascript" >
$(document).ready( function(){
  $("button").click( function(){
    $("p").css({"background-color":"red","font-size":"200%"});
  });
});
</ script >
</ head >

< body >
< h2 >This is a heading </ h2 >
< p >This is a paragraph. </ p >
< p >This is another paragraph. </ p >
< button  type ="button" >Click me </ button >
</ body >
</ html >

 

$(selector).css(name) 用法示例：返回指定的 CSS 属性的值

< html >
< head >
< script  type ="text/javascript"  src ="/jquery/jquery.js" ></ script >
< script  type ="text/javascript" >
$(document).ready( function(){
  $("div").click( function(){
  $("#result").html($( this).css("background-color"));
  });
});
</ script >
</ head >

< body >
< div  style ="width:100px;height:100px;
background:#ff0000" ></ div >
< p  id ="result" >Click in the box </ p >
</ body >

</html>   

转载于:https://www.cnblogs.com/lee0oo0/archive/2012/07/09/2583712.html