jQuery开发之DOM操作五

CSS-DOM操作

CSS-DOM技术简单来说就是读取和设置style对象的各种属性。在jQuery中，可以直接利用css()方法获取元素的样式属性，jQuery示例代码如下：

$("p").css("color");  //获取<p>元素的样式颜色

无论color属性是外部css导入，或者是直接拼接在HTML元素里(内联)，css()方法都可以获取到属性style里的其他属性的值。

css()方法设置单个样式属性，代码如下：

$("p").css("color","red");

与attr()方法一样css()方法可以同时设置多个样式属性，代码如下：

$("p").css({"fontsize":"30px","backgroundolor":"#888888"});

注意：
(1) 如果是数字，将会被自动转换为像素值。
(2) 在css()方法中，如果属性中带有“-”符号，例如font-size 和background-color ,如果再设置这些属性的值的时候，不带引号，那么也可以不带引号，但是建议带上引号，养成好的书写习惯。

在jQuery中还有另外一种方法来获取元素的高度，height()方法。示例代码如下：

$("p").height()；

也可以设置元素的高度，示例代码如下：

$("p").height(100);//高度100像素
$("p").height("100em");  //高度100em

注意：
(1) 在jQuery1.2以后的height()方法可以用来获取window和document的高度。
(2) 两者的区别是：css()方法获取到的高度值与样式的设置有关，可能会得到”auto”，也可能的到“10px” 这样的字符串；而height()方法获取到的高度是元素在页面中的实际高度，与样式的设置无关，并且不带单位。

与height()方法对应的还有一个width()方法，发可以获取匹配元素的宽度值(px)。

1, offset()方法
它的作用是获取元素在当前视窗的相对偏移，其中返回的对象包含两个属性，即top和left，它只对可见元素有效。
jQuery示例代码如下：

var offset = $("p").offset();
var left = offset.left; //获取左偏移
var top = offset.top;   //获取顶部偏移

2，position()方法
它的作用是获取元素相对于最近的一个position样式属性设置为relative 或者absolute的祖父节点相对偏移，它返回的对象包含两个属性，即top和left。
jQuery示例代码如下：

var position = $("p").position();
var left = position.left;
var top = position.top;

3, scrollTop()方法和scrollLeft() 方法
这两个方法的作用分别是获取元素的滚动条距顶端的和距离和左侧的距离。
jQuery示例代码如下：

var $p = $("p");
var left = $p.scrollLeft();获取元素的滚动条距离左侧的距离
var top = $p.scrollTop();获取元的滚动条距离顶端的距离

另外还可以设定一个参数控制元素的滚动条滚动到指定的位置。
jQuery示例代码如下：

$("textarea").scrollTop(300);//元素的滚动条垂直滚动到指定的地方
$("textarea").scrollLeft(300);//元素的滚动条水平滚动到指定的地方