js的Image物件屬性的簡單認識
說來也慚愧,從接觸前端開發以來,一直都在運用jQuery,因為jquery用起來確實是給我們的前端工作帶來很大的便利,以至於忽略了對創造出jquery的始祖javascript學習(可能對我這樣的前端小白來說都對javascript存在著一定的恐懼。),現在終於下定決心好好啃原生js這塊知識。下面是最近自己在學習js基礎知識時的一些總結,歸納起來幫助自己記憶瞭解的同時也希望可以給跟我一樣的初學者一些幫助,規避一些不必要的錯誤。話不多說,下面是自己一些“簡單粗暴式”的理解:
js Dom的image物件的屬性:
align:設定圖片與內聯內容的對齊方式alt:設定或返回圖片無法顯示時的文字
complete:瀏覽器判斷圖片是否載入完整 這個是否涉及到懶載入???有待研究
border:設定或者返回圖片周圍的邊框
height:設定或返回圖片的高度
width:設定或返回圖片的寬度
isMap:返回影象是否是伺服器端的影象對映。 這個是否可以用做判斷從資料庫中拿到的資料是否正確?
useMap:設定或返回客戶端影象對映的 usemap 屬性的值。
id:設定或者返回圖片的id 利用id操作圖片
name:設定或者返回圖片的name
hspace:設定或者返回圖片左或者右的空白部分
vspace:設定或者返回圖片上或者下的空白部分
longDesc:設定或返回指向包含影象描述的文件的 URL。(即alt或者是有文字的圖片中的文字)
lowsrc:設定或返回指向影象的低解析度版本的 URL。
src:設定或返回影象的 URL。
注:Image屬性也有優先順序。
每建立一個img標籤<img/> Image物件也跟著被建立,只是有沒有用到就另當別論,下面是對image屬性的運用:
html部分:
<img id="img" class="img" src="img/3.jpg" lowsrc="img/6.jpg" alt="js中的Iamge屬性的學習" />
<span>some text some text some text</span>
js部分:
<script>
//Image中的align屬性 js在頁面中的位置也很重要,因為html的翻譯是從上至下的。因此要特別注意js的位置
document.getElementById("img").align="left";//圖片的align屬性值預設為center!
//Image中的alt屬性
document.getElementById("img").alt="圖片的alt屬性"; //設定alt的內容
//alert(document.getElementById("img").alt); //獲取圖片alt的內容
//Image中的complete屬性 由於是判斷瀏覽器是否對圖片已完成載入,因此需要html中的body標籤呼叫這個屬性來判斷 利用的是onload事件
//complete返回的值是布林型別 即只有true或者false
function alterImage(){
alert("Image loaded=" + document.getElementById("img").complete)
}
//Image中的border屬性 與css樣式中的border不同的是,Image中的border屬性只需大小,不需要設定其他的屬性
document.getElementById("img").border="3";
//Image中的height/width屬性 只需要數值,不需要帶上單位
document.getElementById("img").height="200";
document.getElementById("img").width="400";
//Image中的isMap屬性 (暫時先忽略)
//Image中的 id屬性 設定id名獲取id名
alert(document.getElementById("img").id);
document.getElementById("img").id="img";
//Image中的name屬性 由於沒設定那麼屬性,因此返回的是空值
alert(document.getElementById("img").name);
//Image中的hspace/vspace屬性 hspace 和 vspace 屬性可與 align 一同使用,來設定影象與周圍文字的距離。
document.getElementById("img").hspace="50";
document.getElementById("img").vspace="50"
//Image中的src/lowsrc屬性 可用於更換圖片查詢圖片路徑等;
document.getElementById("img").src="img/3.jpg";
var x=document.getElementById("img");
document.write('<a href="' + x.lowsrc + '">Low resolution version</a>'); //點選跳轉到低版本的圖片
//Image中的longDesc屬性
</script>