回到首頁
李明哲多媒體寫作教學

2026年5月5日 星期二

給文科生的 javascript 寫作課:選取

再來是選取。

如果你要在文本中做出「互動」的呈現,那麼,首先,你要找出一個物件,這物件讀者可以來對它做出互動的操作,然後呈現出互動的效果。

找出那個要被互動的物件,就是選取

選取,是互動的基本功。不是嗎?

  你可以按下去。去看看發生了什麼事?發生了這件事!

選取最基本的操作概念,是去選出那只有唯一識別的物件。不是嗎?所以,css 中的 id 就是常被用到的操作概念和手法。

請看那互動的語法。
 
onclick="document.getElementById('sp050601').style.fontSize='128px';"

所以,你可以看出來,選取動作的指令語法是 getElementById("idname");

整體的語法句子就是說,在document(這一文件)中,去選出 id 的名稱是 sp050601 的物件,再對這被選出的物件的  style,加入的參數變化 fontSize,使字加大到128px。

這樣看得懂了嗎。

 

以 class 來進行選取

class 可以套用到很多元素物件,所以使用 class 來當作選取的指涉標記,那麼,我們就要從相同 class 的被選取物中,再指定出「那一個」是我們相要去互動的。

這也是我們常碰到的操作思考上的狀況。
 
this is div1 with class cla05060246
this is div2 with class cla05060246
this is div3 with class cla05060246

請按這裡來啟動互動。

從選出的許多 class 標計物中,再指定出特定的項目的操作語法是:

document.getElementsByClassName("classname")[1];

要指定特定項目,要加上[x]。0,代表第一個,以此類推。本例是第二個,所以完整的物件內的互動語法是:


<span onclick="document.getElementsByClassName('cla05060246')[1].style.fontSize = '56px';"  style="background-color:#FFFF00;">請按這裡來啟動互動。</span>



與CSS 語法的配合

再來是,如果你對 CSS 的用法,以及選擇器有不錯的能力,那麼下列的操作語法,同樣是選擇的作用,但和 CSS 的寫法是相同的。這個更被常用。

請按這裡來啟動互動02。

語法:
<span onclick="document.querySelectorAll('.cla05060246')[0].style.fontSize = '56px';" style="background-color:#FFFF00;">請按這裡來啟動互動02。</span>

/**/和下面的語法比較 起來,多了 「All」 。指選出全部。所以仍要加上 [x],以指定項目,此例為第一個。

請按這裡來啟動互動03。

語法,
<span onclick="document.querySelector('.cla05060246:last-of-type').style.fontSize = '56px';" style="background-color:#FFFF00;">請按這裡來啟動互動03。</span>

/**/這個就考驗你的 CSS 選擇器的使用功力了。用 CSS 選擇器語法,選出特定項目。