CSS3 是一種通過原生 CSS 實(shí)現(xiàn)各種效果的新方法,而通過 jQuery 編寫的 JavaScript 代碼可以很好地改變和控制 CSS3 樣式。在 jQuery 中,設(shè)置 CSS3 樣式的方法很簡(jiǎn)單,只需使用內(nèi)置的 CSS() 函數(shù)即可。
// 設(shè)置單個(gè)樣式屬性 $('selector').css('property', 'value'); // 同時(shí)設(shè)置多個(gè)樣式屬性 $('selector').css({ 'property1': 'value1', 'property2': 'value2', 'property3': 'value3' });
在上面的代碼中,'selector' 代表需要修改樣式的 HTML 元素,'property' 和 'value' 分別代表要設(shè)置的 CSS 樣式屬性和屬性值。如果需要同時(shí)設(shè)置多個(gè)樣式屬性,也可以將屬性和屬性值放在一個(gè)對(duì)象中。
除了設(shè)置單個(gè)樣式屬性或同時(shí)設(shè)置多個(gè)樣式屬性的方式外,jQuery 還提供了一種更靈活的方式,即使用回調(diào)函數(shù)。
$('selector').css('property', function(index, value) { return 'new value'; });
在上面的代碼中,回調(diào)函數(shù)接受兩個(gè)參數(shù):index 和 value。index 表示正在處理的元素的索引值,而 value 表示元素的當(dāng)前 CSS 樣式屬性值。回調(diào)函數(shù)需要返回一個(gè)字符串,代表新的 CSS 樣式屬性值。
通過以上三種方法,我們可以很方便地使用 jQuery 設(shè)置 CSS3 樣式,從而實(shí)現(xiàn)各種各樣的頁面效果。