jQuery – 調用 att() 動態調整 HTML 元素的屬性

jQuery/jQuery Mobile 技術文件 》(持續新增中…)

jQuery 支援HTML元素的動態屬性調整,假設有一個標籤如下:

<img id="cimg"  />

以下為存取此標籤 src 屬性所需的語法:

$('#cimg').attr('src','images/myimg.jpg'); //設定 src 屬性
var imgsrc = $('#cimg').attr('src');    // 取得 src 屬性

第一行取得 <img /> 標籤的參照並調用 attr() 方法,設定其 src 屬性指定所要呈現的圖片檔案,第二行取得 src 屬性。考慮以下的範例畫面:
這個畫面可以顯示兩張不同的圖片,當網頁載入完成,會自動顯示第一張圖片,使用者可以點選下方的小型圖示選單,以切換所要呈現的圖片。

首先於網頁配置如下的內容:

<body style="background-color:black;">
    <div>
<img id="cimg"  />
</div>
</body>

這是一個空白的 <img /> 標籤,識別 id 為 cimg ,現在於<script>區段中,配置以下的程式碼:

$(document).ready(
    function () {
        $('#cimg').attr('src', 'images/IMGP0811_l.jpg');
        $('#cimg').attr('width', '460')
    }
);

其中於網頁載入完成時,調用 attr() 以設定 <img> 標籤的圖片來源與呈現寬度。回到網頁配置畫面下方的導覽列:

<div>
<img style="margin:2px;cursor:pointer;"
src="images/IMGP0811_l.jpg"
width="100" onclick ="click_handler(this)" />
<img style="margin:2px;cursor:pointer;"
src="images/IMGP0818_l.jpg"
width="100" onclick ="click_handler(this)"  />
</div>

其中註冊 click 事件處理程序,以回應使用者點擊圖片的動作。以下是 click_handler()函式的內容:

function click_handler(o) {
    var s = $(o).attr('src');
    $('#cimg').attr('src',s);               
}

其中取得目前圖片的 src 屬性,將其重設至 cimg ,以達到大圖的切換效果。

jQuery/jQuery Mobile 技術文件 》(持續新增中…)


沒有留言: