1. 程式人生 > >html裡name、id和class的區別

html裡name、id和class的區別

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

目錄

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='sex'/><input type="radio" name='sex'/>

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

function changtxtcolor() {
    var txts = document.getElementsByName('txtcolor'); //獲取所有name=txtcolor 的標籤
    for (var i = 0; i < txts.length; i++) { //迴圈遍歷標籤,並把背景色改為red
txts[i].style.backgroundColor = 'red'; } }

1.3 特性

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

2. id

指定標籤的唯一標識。

2.1 格式

<input type=password id="userpwd" />

2.2 應用場景

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

②用於充當label標籤for屬性的值:示例:<label for='userid'>使用者名稱:</label>,表示單擊此label標籤時,id為userid的標籤獲得焦點。

2.3 特性

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

3. class

指定標籤的類名。

3.1 格式

<input type=button class="btnsubmit" />

3.2 應用場景

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

3.3 特性

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