影像物件也是一個內建的物件,可以由兩種方式產生:在以下的範例中,我們直接抓取網頁中的影像標籤,來列出其性質,範例如下:
- 由網頁的影像標籤 <img> 所產生,並經由 id 屬性來取得影像物件。
- 由 new Image() 來產生新的影像物件,並可指定其對應影像網址,以達到快取(Cache)功能。
經由 for-in 迴圈的使用,上述範例的完整原始檔案相當簡短:
在上述範例中,可以看出,比較常用的性質如下:
此外,在上述範例中,你會看到影像圖檔會呈現兩次,那是因為 myImage.outerHTML 就是顯示此影像的標籤,所以你會看到此影像。一般而言,對於一個由 HTML 的標籤所形成的物件 obj 而言,obj.outerHTML 是包含前後標籤的 HTML 原始文字,而 obj.innerHTML 則是不包含前後標籤的 HTML 原始文字。例如,如果我們使用 obj 代表下列物件:
- src:影像的網址。
- tagName:標籤名稱(即是IMG)。
- id :id名稱
- naturalWidth:原始影像的寬度,以像素為單位。
- naturalHeight:原始影像的高度,以像素為單位。
- clientWidth:網頁顯示影像的寬度,以像素為單位。
- clientHeight:網頁顯示影像的高度,以像素為單位。
- ownerDocument:影像所在的文件。
linked text 則在下列範例中,我們先產生一個影像物件,再指定其網址,最後將此影像物件的所有性質印出來,範例如下:
- obj.outerHTML = <a target=_blank href="myHome.htm">linked text</a>
- obj.innerHTML = linked text
得到的結果和前一個範例非常類似,上述範例的完整原始檔案如下:
(在嘗試上述範例時,請先確認 myImage.src 是指到一個有效的影像檔案路徑。) 特別要說明的是,一旦指定網址,影像物件就會把各種相關資訊從網址抓回來,因此若可以事先指定多個影像物件的網址,就可以達到快取的功能。有關快取的說明與範例,請見下一章有關於陣列物件的說明。)
在本節的範例中,都是指定相對路徑,但你也可以指定絕對路徑,可得到類似的結果。
JavaScript 程式設計與應用:用於網頁用戶端