首頁 > web前端 > html教學 > html中關於name和id以及class的差別介紹

html中關於name和id以及class的差別介紹

黄舟
發布: 2017-07-19 11:57:05
原創
2937 人瀏覽過

  在一個頁面中,有許多的控制項(元素或標籤)。為了更方便的操作這些標籤,就需要為這些標籤標識一個身份牌。

目錄

1. name :指定標籤的名稱。

2. id :指定標籤的唯一識別。

3. class :指定標籤的類別名稱。

 

1. name

指定標籤的名稱。

1.1 格式

<input type="text" name="username" />
登入後複製

1.2 應用程式場景

①form表單:name可作為轉遞給伺服器表單清單的變數名稱;如上面的傳到伺服器的名稱為:username='text的值'。

②input type='radio'單選標籤:把幾個單選標籤的 name設為一個相同值時,將會進行單選操作。


<input type="radio" name=&#39;sex&#39;/>男<input type="radio" name=&#39;sex&#39;/>女
登入後複製

③快速取得一組name相同的標籤:取得擁有相同name的標籤,一起進行操作,如:更改屬性、註冊事件等。


function changtxtcolor() {    var txts = document.getElementsByName(&#39;txtcolor&#39;); //获取所有name=txtcolor 的标签
    for (var i = 0; i < txts.length; i++) { //循环遍历标签,并把背景色改为red
        txts[i].style.backgroundColor = &#39;red&#39;;
    }
}
登入後複製

1.3 特性

#name屬性的值,在目前page頁面中並非唯一性。

 

2. id

指定標籤的唯一識別。

2.1 格式

<input type=password 
id
="userpwd" />
登入後複製


#2.2 套用場景

①根據提供的唯一id號,快速取得標籤物件。如:document.getElementById(id)

②用於充當label標籤for屬性的值:範例:

2.3 特性

id屬性的值,在目前的page頁面要是唯一的。

 

3. class

指定標籤的類別名稱。

3.1 格式

<input type=button 
class
="btnsubmit" />
登入後複製


3.2 套用場景

#①CSS操作,把一些特定樣式放到一個class類別中,需要此樣式的標籤,可以在新增此類。

3.3 特性

可以把多個類,放在一個class屬性裡,但必須用空格隔開;如:

class
=
&#39;btnsubmit btnopen&#39;
登入後複製


#

以上是html中關於name和id以及class的差別介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板