jQuery 與 JavaScript 比較 (4) - 存取元素屬性

存取元素的屬性只需透過 attr() 方法即可，例如底下有一張圖片：



以下為圖片的構成標籤：

<img border="0" src="…/kangting_large_1020.jpg" width="680" />

透過jQuery 取出標籤的width 屬性需要以下的語法：

var img_width = $('#skyview').attr('width');

img_width 儲存取得的圖片寬度，也就是 680 ，如果要重設width ，同樣透過 attr() 方法即可，語法如下：

  $('#skyview').attr('width', 260);

經過這一行語法的設定，圖片寬度被修改為 260 ，圖片寬度從 680 縮減為 260 ，結果如下：



同樣的功能，JavaScript需要getAttribute()設定屬性，例如以下的語法：

var img_width = document.getElementById('skyview').getAttribute('width');

以上這一行取出圖片的寬度，而重設寬度屬性則需引用另外一個設定方法setAttribute() ：

document.getElementById('skyview').setAttribute('width', 260);

其它的屬性透過相同的語法均能進行存取設定，而針對與樣式有關的 class ，則有專屬性的方法，下一篇作說明。