《HTML5 精要剖析》- 1.6.3 操作網頁元素/操作一個以上的網頁標籤元素-類別選擇器

2012-03-25

3208
0
HTML5
2012-03-26

延續「1.6.2 操作網頁元素/操作一個以上的網頁標籤元素」這一篇討論的議題，這一篇很快的來看看類別選擇如何讓我們跨標籤進行網頁的樣式設計與程式化控制…

無論是CSS 或是透過JavaScript ，透過標籤名稱選擇器，你只能選取同一個類型的標籤進行設定，這對網頁的控制造成了相當大的限制，如果要同時操作不同類型的標籤，可以選擇另外一種類別選擇器，搭配標籤的class 屬性設定，即可完成跨標籤的樣式設計與程式化控制。

再一次的，我們回到一開始的「加法運算器」程式，於其中的<input> 與<output> 標籤，進行以下的設定：

<body>
    <input id="a" type="text" class="valuestyle" />+
    <input id="b" type="text" class="valuestyle" />
    <button onclick="add()" >＝</button>
    <output id="result" class="valuestyle" ></output>
    <hr />
    <button id="clear" onclick="clearText()">清空文字方塊</button>
</body>

請注意無論 <input> 或是<output> 標籤，均設定了class 屬性值為 valuestyle ，接下來，調整CSS 設定，原來的input 樣式如下：

input
{
    width: 60px;
    text-align: right;
    background: black;
    color: silver;
}

現在將項目名稱input 改成.valuestyle ，大括弧的內容則維持不變：

.valuestyle
{
    width: 60px;
    text-align: right;
    background: black;
    color: silver;
}

必須特別注意的是，以. 連接指定的名稱valuestyle ，如此一來，網頁中所有class 屬性設定為 valuestyle 的標籤都將套用此樣式，因此重新於瀏覽器檢視此網頁的內容，會得到以下的結果：

如你所見，不僅文字方塊本身，其輸出結果同樣套用了指定的樣式。現在我們進一步修改「清空文字方塊」按下之後所要執行的JavaScript 程式碼，由於之前調用 querySelectorAll() 指定的是標籤的名稱，因此清空的僅會是文字方塊的內容，如下圖：

這個結果其實並不合理，我們希望的是一併清空輸出結果，這個時候類別選擇器就可以派上用場了，clearText() 原來的內容如下：

function clearText() {
    var inputs = document.querySelectorAll('input');
    inputs[0].value = '';
    inputs[1].value = '';
}

將 querySelectorAll() 的參數input 修改為.valuestyle 如下：

function clearText() {
    var inputs = document.querySelectorAll('.valuestyle ');
    inputs[0].value = '';
    inputs[1].value = '';
    inputs[2].value = '';
}

由於class 屬性設定為 valuestyle 的標籤有三個，因此最後還要將 inputs[2] 的value 也設定為空值，如此一來即可清空三個值如下：

現在，讀者瞭解如何藉由幾種基本的樣式選擇器設定取得所要設定或是程式化控制的標籤，儘管選擇器的種類相當龐大，若是你設計的網頁不是非常複雜，最常用的就是到目前為止所提及的三種選擇器，請務必徹底瞭解其用法。

接下來，我們要專注在JavaScript 語法，討論如何利用迴圈改善程式碼。

回首頁