jQuery操作CSS属性的相关方法

1.前言

jQuery提供了以下几种操作DOM元素CSS样式的方法，包括直接访问、修改DOM元素的class属性值，还提供了访问、修改DOM元素内联CSS属性值的方法，除此之外还提供了大量直接访问、修改DOM元素大小和位置的方法。

jQuery提供的操作CSS属性的相关方法如下。

1) addClass(class):将指定的CSS定义添加到jQuery对象包含的所有DOM对象上。

2) hasClass(class):判断该jQuery对象是否包含至少一个具有指定CSS定义的DOM对象。

3) removeClass(class):删除jQuery对象所包含的所有DOM对象上指定CSS定义。

4) toggleClass(class):如果添加jQuey对象包含的所有DOM对象上具有指定的CSS定义，则删除该CSS定义；否则添加该CSS定义。

5) css(name):返回该jQuery对象包含的第一个匹配的DOM对象上名为naem的CSS属性值。

6) cssname,value):为jQuery对象包含的所有DOM对象设置单个CSS属性值。

7) css(properties):为jQuery对象包含的所有DOM对象同时设置多个CSS属性值。

8) offset():获取jQuery对象包含的第一个匹配的DOM对象相对于该文档的位置。

9) position():获取jQuery对象包含的第一个匹配的DOM对象相对于其父元素的位置。

10) scrollTop():获取jQuery对象包含的第一个匹配所有的DOM对象的scroll top值。

11) scrollTop(val):设置jQuery对象里包含的所有DOM对象的scrollleft值。

12) scrollLeft():获取jQuery对象包含的所有DOM对象的scrollleft值。

13) scrollLeft(val)：获取jQuery对象包含的所有DOM对象的scrollleft值。

14) height:返回jQuery对象里第一个匹配元素的当前高度（以px为单位）

15) height(val):设置jQuery对象里所有元素的高度，val的单位为px.

16) width():返回jQuery对象里所有元素的宽度（以px为单位）

17) width(val)：设置jQuery对象里所有元素的宽度，val的单位为px。

2.例子

下面的程序示范了开发自定义CSS属性

 <!DOCTYPE html>
<html>
<head><meta name="author" content="OwenWilliam" /><meta http-equiv="Content-Type" content="text/html; charset=GBK" /><title> 操作CSS属性的工具方法 </title>
</head>
<body>
<div></div>
<div></div>
<script type="text/javascript" src="../jquery-1.8.0.js">
</script>
<script type="text/javascript">
(function($)
{var _patterns = {"msie": "progid:DXImageTransform.Microsoft.Gradient(" +"StartColorStr='{0}', EndColorStr='{1}', GradientType=0)","msie10": "-ms-linear-gradient(top, {0} 0%, {1} 100%)","mozilla": "-moz-linear-gradient(top, {0} 0%, {1} 100%)","opera": "-o-linear-gradient(top, {0} 0%, {1} 100%)","webkit": "-webkit-linear-gradient(top, {0} 0%, {1} 100%)","unknown": "-webkit-linear-gradient(top, {0} 0%, {1} 100%)"};// 定义一个获取浏览器名称的函数var browserName = function() {var ua = $.browser;if (ua.mozilla) return "mozilla";else if(ua.opera) return "opera";else if(ua.webkit) return "webkit";// 判断是否为IE 10。如果IE 10，则返回msie10else if(ua.msie) return ua.version.split('.')[0] > 9? "msie10" : "msie";else return "unknown";}// 定义函数，针对不同浏览器生成CSS属性值var genCssString = function(colorStr, browser){// 获取不同浏览器对应的CSS属性值模板var reStr = _patterns[browser];if (!reStr) return null;// 将colors按逗号分隔成两个字符串var colors = colorStr.split(',');if (colors.length != 2) return;// 将{0}占位符替换成colors[0]// 将{1}占位符替换成colors[1]return reStr.replace(/\{0\}/, colors[0]).replace(/\{1\}/, colors[1]);};$.cssHooks["lineGradBackground"] = {get: function (elem, computed, extra){return elem.style.background;},set: function (elem, value){// 获取浏览器版本var b = browserName();// 根据不同浏览器设置不同的background属性值// 对于早期版本的IE浏览器，应该使用filter属性elem.style[b == "msie" ? "filter" : "background"]= genCssString(value, b);}};
})(jQuery);
$("body>div").width(300).height(40).css("padding" , 30);
$("body>div:first").css("lineGradBackground", "#e2f, #efe");
$("body>div:last").css("lineGradBackground", "#fff, #111");
</script>
</body>
</html>

3.运行结果