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.運行結果
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
