蓋瑞的學習筆記室

attr() 抓取圖片的屬性以及改變圖片的路徑

發表於 分類於

抓取圖片屬性與路徑的方式 :

  • JavaScript
    使用 document.getElementById("MyPicture").src 來抓取圖片的 src 路徑
  • JQuery
    使用 $("#MyPicture").attr("src"); 抓取圖片的 src 路徑

變換圖片範例練習 :

練習

index.html 

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="Box">  
  <!-- 縮小圖 -->
  <div class="small__img JS-small">
      <img src="images/img1.jpg" width="120" height="142" id="img1">
      <img src="images/img2.jpg" width="120" height="142" id="img2">
      <img src="images/img3.jpg" width="120" height="142" id="img3">
      <img src="images/img4.jpg" width="120" height="142" id="img4">
  </div>
  <!-- 放大圖 -->
  <div class="big__img">
  	<img src="images/img1.jpg" width="500" height="600" class="JS-big">
  </div>
</div>

練習說明

  • 使用 $("#img1").attr("width"); 可抓出第一張圖片的寬度，得值 120 。
  • 使用 $("#img2").attr("id"); 可抓出第二張圖片的 id 名字，得值 img2 。
  • 使用 $("#img3").attr("src"); 可抓出第三張圖片的路徑，得值 images/img3.jpg 。
  • 使用 $("#img4").attr("width", "180"); 可以把圖片的寬度，更改成為 180 。
  • 使用 $("#img1").attr("src", "images/small.jpg"); 可以把圖片路徑改為 images/small.jpg 。

all.js

1
2
3
4
5
6
$(function(){	
	$(".JS-small img").click(function(){		
		var num = $(this).attr("id").substr(3);		
		$(".JS-big").attr( "src" , "images/img" + num + ".jpg" );
	});
});

練習說明

  • $(“.JS-small img”) 選取縮小圖片，使用 click 事件。
  • 宣告變數 num 抓取 $(this).attr(“id”) 得到目前被點選縮小圖片的 id 名稱。
  • 使用 substr(3) 截取出小圖片的 id 名稱的最後一個字。(關於substr用法參考筆記)
  • 選取 $(“.JS-big”) ，使用 attr("取得圖片路徑","更改圖片路徑") 。
  • 達成使用 jQuery 點選小圖片更換大圖片的功能。

學習參考網址
jQuery 教學 – attr() 抓取圖片的屬性以及改變圖片的路徑