用JQuery操做元素的style属性

style属性颇有用，但最大不足是没法经过它来提取到经过外部CSS设置的样式信息，然而在jQuery中，这些都是很是的简单。CSS-DOM技术简单来讲就是读取和设置style对象的各类属性。css

效果演示

欢迎访问简明现代魔法图书馆字体

简单易懂的PHP魔法
简单易懂的JavaScript魔法
简单易懂的JQuery魔法

能够直接利用css()方法获取元素的样式属性，JQuery代码以下：spa

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

不管color属性是外部CSS导入，仍是直接拼接在HTML元素里（内联），css()方法均可以获取到属性style里的其余属性的值。对象

也能够直接利用css()方法设置某个元素的单个样式，例如：ip

$("p").css("color","red"); //设置p元素的样式颜色为红色ci

与attr()方法同样，css()方法也能够同时设置多个样式属性，代码以下：element

 
         //同时设置字体大小和背景色   
        
         $("p").css({"fontSize":"30px" ,"backgroundColor":"#ccc"})；

若是值是数字，将会被自动转化为像素值。在css()方法中，若是属性中带有“-”符号，例如font-size和background-color属性，若是在设置这些属性的值的时候不带引号，那么就要用驼峰式写法，好比上面的代码，若是带上了引号，既能够写成“font-size”，也能够写成“fontSize”。总之建议你们加上引号，养成良好的习惯。字符串

对透明度的设置，能够直接使用opacity属性，jQuery已经处理好了兼容性的问题，以下代码所示，将p元素的透明度设置为半透明：input

$("p").css("opacity","0.5");

若是须要获取某个元素的height属性，则能够经过以下JQuery代码实现：

$(element).css("height");

在jQuery中还有另一种方法也能够获取元素的高度，即height()。它的做用是取得匹配元素当前计算的高度值(px)：

$("p").height(); //获取p元素的高度值

height()方法也能用来设置元素的高度，若是传递的值是一个数字，则默认单位为px。若是要用其余单位（例如em），则必须传递一个字符串，JQuery代码以下：

 
         $("p").height("100px"); //设置p元素的高度值为l00px   
        
         $("p").height("2em");   //设置p元素的高度值为2em

在jQuery l.2版本之后的height()方法能够用来获取window和document的高度。
二者的区别是：css()方法获取的高度值与样式的设置有关，可能会获得“auto”，也可能获得”10px”之类的字符串；而height()方法获取的高度值则是元素在页面中的实际高度，与样式的设置无关，而且不带单位。

与height()方法对应的还有一个width()方法，它能够取得匹配元素的宽度值(px)。

$("p").width()； //获取p元素的宽度值

一样，width()方法也能用来设置元素的宽度。

$("p").width("400px"); //设置p元素的宽度值为400px

offset()方法

它的做用是获取元素在当前视窗的相对偏移，其中返回的对象包含两个属性，即top和left，它只对可见元素有效。例如用它米获取p元素的的偏移量：

 
         var offset = $("p").offset();   //获取p元素的offset()   
        
         var left = offset.left;   //获取左偏移   
        
         var top =  offset.top;    //获取右偏移

position()方法

它的做用是获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移，与offset()同样，它返回的对象也包括两个属性，即top和left。JQuery代码以下：

 
         var position = $("p").position();    //获取p元素的position()   
        
         var left = position.left;    //获取左偏移   
        
         var top = position.top;    //获取右偏移

scrollTop()方法和scrollLeft()方法

这两个方法的做用分别是获取元素的滚动条距顶端的距离和距左侧的距离。例如使用下面的代码获取p元素的滚动条距离：

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

另外，能够为这两个方法指定一个参数，控制元素的滚动条滚动到指定位置。例如使用以下代码控制元素内的滚动条滚动到距顶端300和距左侧300的位置：

 
         $("textarea").scrollTop (300);    //元素的垂直滚动条滚动到指定的位置      
        
         $("textarea").scrollLeft (300); //元素的横向滚动条滚动到指定的位置