jQuery 学习十一(CSS)

    ●  css(name)

/**
 * 访问第一个匹配元素的样式属性。
 *
 * @name(String) 要访问的样式属性名称
 * @return String
 * @owner jQuery Object
 */
function css(name);

// 例子：取得第一个段落的 color 样式属性的值。
$("p").css("color");

    ●  css(name, value)

/**
 * 访问第一个匹配元素的样式属性。数字将自动转化为像素值。
 *
 * @name(String) 样式属性名称
 * @value(String, Number) 样式属性值
 * @return jQuery Object
 * @owner jQuery Object
 */
function css(name, value);

// 例子：将所有段落字体设为红色。
$("p").css("color", "red");

    ●  css(properties)

/**
 * 把一个 "名/值对" 对象设置为所有匹配元素的样式属性。
 * 这是一种在所有匹配的元素上设置大量样式属性的最佳方式。
 *
 * @properties(Map) 要设置为样式属性的名/值对
 * @return jQuery Object
 * @owner jQuery Object
 */
function css(properties);

// 例子一：将所有段落的字体颜色设为红色并且背景为蓝色。
$("p").css({ color: "#ff0011", background: "blue" });

// 例子二：如果属性名包含 "-"，必须使用引号 ""
$("p").css({ "margin-left": "10px", "background-color": "blue" });

    ●  offset()

/**
 * 获取匹配元素在当前视口的相对偏移。返回的对象包含两个整形属性：top 和 left。此方法只对可见元素有效。
 *
 * @return Object{top, left}
 * @owner jQuery Object
 */
function offset();

// 例子：获取第二段的偏移。
<p>Hello</p>
<p>2nd Paragraph</p>

var p = $("p:last");
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );

result: <p>Hello</p><p>left: 0, top: 35</p>

    ●  height()

/**
 * 取得第一个匹配元素当前计算的高度值(px)。
 *
 * @return Integer
 * @owner jQuery Object
 */
function height();

// 例子一：获取第一段的高。
$("p").height();

// 例子二：获取文档的高。
$(document).height();

    ●  height(val)

/**
 * 为每个匹配的元素设置 CSS 高度(height)属性的值。如果没有明确指定单位(如：em 或 %)，使用 px。
 *
 * @val(String, Number) 设定 CSS 中 "height" 的值
 * @return jQuery Object
 * @owner jQuery Object
 */
function height(val);

// 例子：把所有段落的高设为 20。
$("p").height(20);

    ●  width()

/**
 * 取得第一个匹配元素当前计算的宽度值(px)。
 *
 * @return Integer
 * @owner jQuery Object
 */
function width();

// 例子一：获取第一段的宽。
$("p").width();

// 例子二：获取当前窗口的宽。
$(window).width();

    ●  width(val)

/**
 * 为每个匹配的元素设置 CSS 宽度(width)属性的值。如果没有明确指定单位(如：em 或 %)，使用 px。
 *
 * @val(String, Number) 设定 CSS 中 "width" 的值
 * @return jQuery Object
 * @owner jQuery Object
 */
function width(val);

// 例子：把所有段落的宽设为 20。
$("p").width(20);