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，则返回msie10
else 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.运行结果
