jQuery 学习十一(CSS)

 ●  css(name) 

Javascript代码  

1. /** 
2.  * 访问第一个匹配元素的样式属性。 
3.  * 
4.  * @name(String) 要访问的样式属性名称 
5.  * @return String 
6.  * @owner jQuery Object 
7.  */  
8. function css(name);  
9.   
10. // 例子：取得第一个段落的 color 样式属性的值。  
11. $("p").css("color");  

    ●  css(name, value) 

Javascript代码  

1. /** 
2.  * 访问第一个匹配元素的样式属性。数字将自动转化为像素值。 
3.  * 
4.  * @name(String) 样式属性名称 
5.  * @value(String, Number) 样式属性值 
6.  * @return jQuery Object 
7.  * @owner jQuery Object 
8.  */  
9. function css(name, value);  
10.   
11. // 例子：将所有段落字体设为红色。  
12. $("p").css("color", "red");  

    ●  css(properties) 

Javascript代码  

1. /** 
2.  * 把一个 "名/值对" 对象设置为所有匹配元素的样式属性。 
3.  * 这是一种在所有匹配的元素上设置大量样式属性的最佳方式。 
4.  * 
5.  * @properties(Map) 要设置为样式属性的名/值对 
6.  * @return jQuery Object 
7.  * @owner jQuery Object 
8.  */  
9. function css(properties);  
10.   
11. // 例子一：将所有段落的字体颜色设为红色并且背景为蓝色。  
12. $("p").css({ color: "#ff0011", background: "blue" });  
13.   
14. // 例子二：如果属性名包含 "-"，必须使用引号 ""  
15. $("p").css({ "margin-left": "10px", "background-color": "blue" });  

    ●  offset() 

Javascript代码  

1. /** 
2.  * 获取匹配元素在当前视口的相对偏移。返回的对象包含两个整形属性：top 和 left。此方法只对可见元素有效。 
3.  * 
4.  * @return Object{top, left} 
5.  * @owner jQuery Object 
6.  */  
7. function offset();  
8.   
9. // 例子：获取第二段的偏移。  
10. <p>Hello</p>  
11. <p>2nd Paragraph</p>  
12.   
13. var p = $("p:last");  
14. var offset = p.offset();  
15. p.html( "left: " + offset.left + ", top: " + offset.top );  
16.   
17. result: <p>Hello</p><p>left: 0, top: 35</p>  

    ●  height() 

Javascript代码  

1. /** 
2.  * 取得第一个匹配元素当前计算的高度值(px)。 
3.  * 
4.  * @return Integer 
5.  * @owner jQuery Object 
6.  */  
7. function height();  
8.   
9. // 例子一：获取第一段的高。  
10. $("p").height();  
11.   
12. // 例子二：获取文档的高。  
13. $(document).height();  

    ●  height(val) 

Javascript代码  

1. /** 
2.  * 为每个匹配的元素设置 CSS 高度(height)属性的值。如果没有明确指定单位(如：em 或 %)，使用 px。 
3.  * 
4.  * @val(String, Number) 设定 CSS 中 "height" 的值 
5.  * @return jQuery Object 
6.  * @owner jQuery Object 
7.  */  
8. function height(val);  
9.   
10. // 例子：把所有段落的高设为 20。  
11. $("p").height(20);  

    ●  width() 

Javascript代码  

1. /** 
2.  * 取得第一个匹配元素当前计算的宽度值(px)。 
3.  * 
4.  * @return Integer 
5.  * @owner jQuery Object 
6.  */  
7. function width();  
8.   
9. // 例子一：获取第一段的宽。  
10. $("p").width();  
11.   
12. // 例子二：获取当前窗口的宽。  
13. $(window).width();  

    ●  width(val) 

Javascript代码  

1. /** 
2.  * 为每个匹配的元素设置 CSS 宽度(width)属性的值。如果没有明确指定单位(如：em 或 %)，使用 px。 
3.  * 
4.  * @val(String, Number) 设定 CSS 中 "width" 的值 
5.  * @return jQuery Object 
6.  * @owner jQuery Object 
7.  */  
8. function width(val);  
9.   
10. // 例子：把所有段落的宽设为 20。  
11. $("p").width(20);