Η ιδιότητα class του HTML

Ορισμός και χρήση

class Η ιδιότητα καθορίζει το όνομα της τάξης του στοιχείου (classname).

class Η ιδιότητα χρησιμοποιείται κυρίως για να δείχνει στην τάξη των στοιχείων του πλαισίου (class). Ωστόσο, μπορεί επίσης να χρησιμοποιηθεί με JavaScript (HTML DOM) για να αλλάξει τα στοιχεία HTML που έχουν καθορισμένη τάξη.

See also:

HTML Tutorial:HTML ιδιότητες

CSS Tutorial:Γλώσσα CSS

CSS Reference Manual:CSS επιλογέας .class

HTML DOM Reference Manual:HTML DOM getElementsByClassName() Method

HTML DOM Reference Manual:HTML DOM className Attribute

HTML DOM Reference Manual:HTML DOM classList Attribute

HTML DOM Reference Manual:Όντως του HTML DOM Style

Example

Example 1

Use the class attribute in an HTML document:

<html>
<head>
<style>
h1.intro {
  color: blue;
}
p.important {
  color: green;
}
</style>
</head>
<body>
<h1 class="intro">Header 1</h1>
<p>A paragraph.</p>
<p class="important">Please note, this is an important paragraph. :)</p>
</body>
</html>

Δοκιμάστε προσωπικά

More examples are provided below the page.

Syntax

<element class="classname">

Attribute value

Value Description
classname

Specify one or more class names for an element.

If you want to specify multiple classes, you can separate them with spaces.

This allows you to combine multiple CSS classes for an HTML element.

For example: <span class="left important">

Naming rules:

  • Must start with a letter A-Z or a-z
  • Can be followed by: letters (A-Za-z), numbers (0-9), hyphens ("-"), and underscores ("_").

More examples

Example 2

Add multiple classes to an HTML element:

<!DOCTYPE html>
<html>
<head>
<style>
h1.intro {
  color: blue;
  text-align: center;
}
.important {
  background-color: yellow;
}
</style>
</head>
<body>
<h1 class="intro important">Title 1</h1>
<p>A paragraph.</p>
</body>
</html>

Δοκιμάστε προσωπικά

Example 3

Using JavaScript, add a yellow background color to the first element with class="example" (index 0).

let x = document.getElementsByClassName("example");
x[0].style.backgroundColor = "yellow";

Δοκιμάστε προσωπικά

Παράδειγμα 4

Χρησιμοποιήστε το JavaScript για να προσθέσετε την κλάση "mystyle" στο στοιχείο με το id "myDIV":

document.getElementById("myDIV").classList.add("mystyle");

Δοκιμάστε προσωπικά

Υποστήριξη περιηγητή

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Υποστήριξη Υποστήριξη Υποστήριξη Υποστήριξη Υποστήριξη