HTML中標籤的class屬性的值及其使用方法總結-html教學-PHP中文網

首頁

web前端

html教學

HTML中標籤的class屬性的值及其使用方法總結

寻∝梦

Aug 27, 2018 pm 02:19 PM

classhtmlinput

本篇文章主要為大家介紹了關於HTML中input標籤的class屬性的具體作用，都有實例證明，還有input標籤的class屬性和屬性值的使用方法解釋，最後一點是關於class屬性的一個其它用法實例。

首先呢，我們來談談HTML中input標籤的class屬性的作用：

input標籤的class屬性是用來引用你頁面的類別樣式。

即你先在標籤內定義一個類別樣式，然後再來引用它。

像這樣：

<style type="text/css">
.btn{
color:red;
}
</style>
<input type="button" class="btn" />

頁面的效果就不顯示了，反正就是把這個按鈕上的文字顏色是紅色了。有興趣的可以自己試試看。

下面說說特定的input標籤的class屬性和屬性的值的使用方法解釋：

classname屬性。 a標籤中class屬性，供新增樣式用，相關概念有class及映射classname、classlist這3個。

一般來說，所有屬性都可以object、object[""]及object.getAttribute("")來存取的，但因class屬於JavaScript保留字，故將其映射為classname 來供上述方案存取。所以標準瀏覽器都支援：a.classname和a["classname"]這2個辦法的存取。

至於a.getattribute("class")還是a.getattribute("classname")則要看瀏覽器是否相容這個方法的存取權了。（待考：前者能在mozilla(firefox)和opera中正確運行，在IE和safari中則不能使用。後者能在IE和opera中正確運行，在mozilla(firefox)和safari中則不能使用。）

但DOM2級方法object.getattribute("")，用來取得標籤內的自訂屬性是沒問題的，所以一個保守的做法是

classList屬性。因為class屬性的值可以包含若干個樣式名，如class="top1 left",這個字串性質的值常常需要我們操作，classname完成class的了映射，但操作class屬性的值時卻顯得僵硬的很。怎麼辦，HTML5 新增API之classlist能解決這個問題。

classlist屬性又是classname的改進，就像我們見到的arguments屬性、childnode屬性一樣，可以理解為一個類別陣列物件。（仍待考哈）

classlist帶來了一些運算方法和屬性：add( ), remove( ),toggle( ),contains( )等及length。

可以用a.classList或a["classList"]辦法訪問，a.getAttribute("classList")仍然有瀏覽器相容問題。

class屬性除了在用於input標籤裡面，還有其他的方向，例如下面這個：

在HTML 文件中使用class 屬性實例：

<html>
<head>
<style type="text/css">
h1.intro {color:blue;}
p.important {color:green;}
</style>
</head>
<body>
<h1 id="Header-nbsp">Header 1</h1>
<p>A paragraph.</p>
<p class="important">Note that this is an important paragraph.</p>
</body>
</html>

這裡是註解：

#class 屬性不能在下列HTML 元素中使用：base, head, html , meta, param, script, style 以及title。

可以賦予 HTML 元素多個 class，例如：。這麼做可以把若干個 CSS 類別合併到一個 HTML 元素。

類別名稱不能以數字開頭！只有 Internet Explorer 支援這種做法。

【相關推薦】

HTML中head標籤是什麼意思？一篇文章教你正確地使用head標籤

html表格中的th表頭內容怎麼居中？ th表頭標籤align屬性的具體介紹

以上是HTML中標籤的class屬性的值及其使用方法總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

HTML的多功能性：應用和用例Apr 30, 2025 am 12:03 AM

HTML不僅是網頁的骨架，更廣泛應用於多種領域：1.在網頁開發中，HTML定義頁面結構並結合CSS和JavaScript實現豐富界面。 2.在移動應用開發中，HTML5支持離線存儲和地理定位等功能。 3.在電子郵件和新聞通訊中，HTML提升郵件的格式和多媒體效果。 4.在遊戲開發中，HTML5的CanvasAPI用於創建2D和3D遊戲。