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 ,則有專屬性的方法,下一篇作說明。

沒有留言: