jQuery 屬性與樣式 (Attributes & CSS)

我想一般對於 JavaScript 大部分的操作都用在變動 HTML DOM 元素的屬性跟樣式,如果你有這個經驗,就會知道在設定時會有許多複雜及麻煩的問題,比如說舊 IE 它 setAttribute 不吃 name 屬性;又像在指定 class 屬性時,名稱不能用 class 而要用 className 等問題。令人開心的,jQuery 已經幫你處理掉中間這些繁雜過程可能遇到的問題了!

用 jQuery 時,你只需要記得原本的 HTML 和 CSS 是怎樣寫就行。

jQuery 對於 HTML Tag 屬性的操作 (Attributes)

取得選取到的元素之屬性值:

.attr(attributeName)

例如,取得第一個連結的 title 值:

$('a').attr('title');

替選取到的元素設定屬性值:

.attr(attributeName, value)

例如,替所有連結的 title 屬性設為 Enjoy jQuery:

$('a').attr('title', 'Enjoy jQuery');

你也可以用 key/value object 的方式來替所有匹配到的元素設定多個屬性值:

.attr(attributes)

例如,同時改變 alt 和 title 屬性:

$( "#greatphoto" ).attr({
    alt: "Beijing Brush Seller",
    title: "photo by Kelly Clark"
});

移除元素屬性也很簡單:

.removeAttr(attributeName)

例如,移除所有連結的 title 屬性:

$('a').removeAttr('title');
// 上面同等於這樣做
$('a').attr('title', null);

jQuery 對 class 這個屬性有特別的處理

對於 class,jQuery 另外提供個別的函式來作 class 增刪的動作,這是為了可以方便疊加與移除特定的 class。

增加 class:

.addClass(className)

例如,幫所有的段落加入 selected 和 highlight 類別:

$('p').addClass('selected highlight');

用空白隔開多個 class。


移除 class:

.removeClass(className)

例如,移除 id 為 wrapper 的元素其 blue 這個類別:

$('#wrapper').removeClass('blue');

Value - Getter/Setter

val,一個很常用到的方法,用來取得和設定表單元素的 value 值:

.val() // get
.val(value) // set

例如,取得表單元素的值:

// 取得下拉選單 (select box) 的值
$('select.foo').val();

// 取得 checkbox 欄位的選取值
$('input:checkbox:checked').val();

// 取得 radio 欄位的選取值
$('input:radio[name=bar]:checked').val();

例如,設定表單元素的值:

// HTML
<input type="text">
// 設定欄位值
$('input').val('Hello World!');
// 設定後的結果
<input type="text" value="Hello World!">

jQuery 對於樣式的操作 (CSS)

傳統 JavaScript 在處理 CSS 的問題上簡直頭大,設定一個 background-color 你得先知道其實要改用 elem.style.backgroundColor;對透明度 opacity 設定上你要了解舊 IE 是用 filter··。jQuery 的寫法很簡單,就直接用 key/value 成對的一組屬性來設定,我們只要知道 CSS 的表達式就沒問題。

取得第一個匹配到的元素之樣式:

.css(propertyName)

例如,取得第一個段落的字體顏色:

$('p').css('color'); 

替所有匹配到元素設定一種樣式:

.css(propertyName, value)

例如,替所有段落的透明度設為半透明:

$('p').css('opacity', '0.5');
// 是的,設 opacity 就可以,jQuery 已經幫你處理好跨瀏覽器問題

你也可以用 key/value 對的方式指定給所有匹配的元素多個樣式:

.css(properties)

例如,替所有段落的字體設為紅色,背景設為藍色:

$('p').css({
  color: 'red',
  'background-color': 'blue'
});

若屬性中包含 -,記得加上引號,沒有的話則可有可無。

元素的位置及寬高 - 常用的屬性獨立出來

.width() // 取得元素寬度
.width(value) // 設定元素寬度
.height() // 取得元素高度
.height(value) // 設定元素高度

.width() .height() 抓到的值是元素內容寬、高度,不包含 padding, border, margin。

例如,取得第一個匹配到的段落元素高度 (px) (無參數)

$('p').height();

例如,設定每個匹配到的段落元素其高度設為 100px (沒指定單位時預設為 px) (有參數)

$('p').height(100);

取得元素相對於當前視窗左上角的位置偏移量:

.offset()
// 返回值 Object{top, left}
var offset = $('p:last').offset();
console.log(offset.left)
console.log(offset.top)

一般在傳統 JavaScript 我們會用 offsetLeft 及 offsetTop 來取得元素在頁面上的座標,不過 IE 與 FF 瀏覽器解讀這兩個屬性是不一樣的,IE 會解讀成目標元素跟父元素的 left-top 距離;FF 則是相對於頁面上的 left-top,所以在 IE 下我們一般都需要利用往父元素跑迴圈加總 offsetLeft 來取得元素在頁面上的座標值。不過,在 jQuery 中我們統一用 offset() 就可以囉!

看過上述 jQuery 對於屬性及樣式的操作,是不是簡化了我們許多不必要的煩惱,讓我們可以將精力拉回純 HTML 與 CSS 的思緒上面呢!