iT邦幫忙

0

請問網頁id和class的差別

小弟雖然知道id唯一的特性

無奈設計師給的頁面總是把id當class用

還被反問「頁面顯示又沒問題,javascript還是可以抓到,這樣有什麼差別嗎?」

想跟主管反應這個問題

請問有沒有W3C正式的規範文件可以佐證呢?

網路文章也只是兩三句帶過,不夠有說服力

weiclin iT邦高手 4 級 ‧ 2016-06-19 08:45:49 檢舉
看看這篇夠不夠說服力 http://programmers.stackexchange.com/questions/127178/two-html-elements-with-same-id-attribute-how-bad-is-it-really
所以呢,才有一堆大廠套 bootstrap 這種開發套件了
為的就是統一視覺效果,你可以直接套用官方預設的顏色,也可以自行去修改
這種開發套件對 id 跟 class 還有 datacode 是很要求的
建議爭論不如直接用套件開發比較快
說實在的,你說的事情並不是設計師的職責,相反的,卻是網頁程式開發從業人員的本職學能。你如果是網頁程式開發人員,那我就實在不明白你到底是想跟人家戰什麼。
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
1
海綿寶寶
iT邦大神 1 級 ‧ 2016-06-19 09:47:14

人生海海,能 work 就好

真要戰
可以參考這篇
那個 Barcode 和序號的比喻寫得不錯

1
wiseguy
iT邦超人 1 級 ‧ 2016-06-20 00:59:23

只會 copy 的設計師就是這種程度。只 care 相同表單或相同區塊的樣式一樣,不 case 姓名表單跟住址表單是不同變數,這跟夏蟲不可語冰是一樣的道理,你跟他們爭辯只會爭到不知所云。建議你下次給的 UI 需求,每個表單都不一樣顏色,每個區塊都不同背景,再看設計師怎麼 copy 吧?

0
tzuchin
iT邦新手 5 級 ‧ 2016-06-20 12:45:28

https://www.w3.org/TR/html401/struct/global.html#h-7.5.2

id = name [CS]
This attribute assigns a name to an element. This name must be unique in a document.

class = cdata-list [CS]
This attribute assigns a class name or set of class names to an element. Any number of elements may be assigned the same class name or names. Multiple class names must be separated by white space characters.

tzuchin iT邦新手 5 級 ‧ 2016-06-20 12:46:04 檢舉
1
fillano
iT邦超人 1 級 ‧ 2016-06-20 13:04:41

只依賴id喔,那碰到複雜的網站,style的管理會很麻煩。

id只是一個單純的識別字串,class不是喔。透過class可以指定多個class給單一元素,這樣會帶來一些好處,主要是讓css的組織更清楚,而且可以重複利用。

例如把layout相關(位置、段落距離)跟字體(大小、粗細、裝飾效果、顏色)拆開,layout的部份就可以根據版面不同位置的需求統一制定,字體則根據文章的需求來制定(統一風格的抬頭、統一的段落風格、特殊的段落風格),最後才根據位置跟內容,用class組合起來,這樣分工跟組織會更好。

不過呢,這些只是個人經驗,大概也很難說服配合的設計師吧。

1
yuanshang
iT邦新手 4 級 ‧ 2016-06-20 16:35:17

先推 fillano 大的回答。

想必您是要利用或操作 DOM,才會對 id 和 class 介意,如前幾位大德所說,id 是唯一識別,在操作上單一tag 會最直接快速,但是彈性會小很多,class 的彈性較好,因為一個 tag 的 class 可有多個組合 (fillano 也有提),多個 tags 因使用 class (抽象成一類) 可以對彼此的 attributes/property 交互及重複使用,而且如果在程式碼大量有重複特性的 tags,使用JavaScript (or jQuery etc.) 操作 class 會比較方便。

當然說到底全部使用 id還是可以做得嚇嚇叫,至於 id 使用過多會不會造成 client 端 browser 執行上的記憶體增加,我沒有資料不敢亂說。以上。

0
kiten8599
iT邦新手 5 級 ‧ 2016-06-20 20:01:59

參考看看:
"網頁"設計師不負責程式部分的話,也許,全部用class是比較好的,因為只有寫程式的人,才知道如何判斷哪些元素要改成id比較適合(做精準元素控制)。自己改過之後,再轉存一份給網頁設計師。

1
maxmas
iT邦新手 4 級 ‧ 2016-06-21 12:21:31

在 CSS 語法中,Class 及 ID 都是使用者設定的選擇器 (selector)。
這兩者最大的不同,是在於 ID 選擇器在一個 HTML 文件中只能被使用一次,而 Class 選擇器在一個 HTML 文件中可以被使用多次。第二個不同的地方,是 ID 選擇器可以被 Javascript 中的 GetElementByID 函數所運用,而 Class 選擇器無法被 Javascript 運用到。

並沒有什麼固定的規則,來決定什麼時候要用 ID 及什麼時候要用 Class。我的建議是盡量用 Class,因為這樣子最靈活 (同一個 HTML 文件可以利用這類的選擇器多次)。唯一的例外,是當你要用 Javascript 的 GetElementByID 函數時。在這個情況下,你就應該要用 ID。

也就是說,當你在使用JavaScript來對元件操作時,例如檢查某欄位有沒有填寫,就需要ID號識別是哪個元件。

0
77012904
iT邦新手 3 級 ‧ 2016-06-29 16:13:19

那「name」這個屬性呢?

我覺得樓主是不是也問錯了...

「id」v.s.「name」才是

我要發表回答

立即登入回答