HTML class Atributo

Pagsasakatuparan at Paggamit

klase Ang atributo ay nagtutukoy sa pangalan ng klase ng elemento.

klase Atributo ay pangunahing ginagamit upang tumutukoy sa klase (class) sa estilo sheet. Gayunpaman, maaari itong gamitin din sa pamamagitan ng JavaScript (HTML DOM) upang baguhin ang HTML na may tinukoy na klase.

Maging maging:

HTML Tutorial:属性 HTML

CSS Tutorial:ความเข้าใจของ CSS

CSS Reference Manual:เลือกซับคลาส CSS

HTML DOM Reference Manual:HTML DOM getElementsByClassName() Method

HTML DOM Reference Manual:HTML DOM className Atrybuto

HTML DOM Reference Manual:HTML DOM classList Atrybuto

HTML DOM Reference Manual:ของ HTML DOM Style

Halimbawa

Halimbawa 1

Gamit ang class atrybuto sa isang HTML dokumento:

<html>
<head>
<style>
h1.intro {
  color: blue;
}
p.important {
  color: green;
}
</style>
</head>
<body>
<h1 class="intro">Pamagat 1</h1>
<p>Isang paragrapo.</p>
<p class="important">Pansin, ito ay isang mahalagang paragrapo.:)</p>
</body>
</html>

ทดลองด้วยตัวเอง

Mayroong higit pang mga halimbawa sa ibaba ng pahina.

Panggramatika

<elemento class="classname">

Halaga ng Atrybuto

Halaga Paglalarawan
classname

Tukuyin ang isang o maraming klase ng elemento.

Kung mayroong kailangan na magtukoy ng maraming klase, maghihiwalay ng pangalan ng klase ng pamamagitan ng espasyo.

Ito ay nagbibigay ng kapahintulutan para magkombinahin ang maraming klase ng isang HTML elemento.

Halimbawa: <span class="left important">

Patakaran sa pangalang klase:

  • Dapat magsimula sa titik A-Z o a-z.
  • Maaaring sumunod ng: titik (A-Za-z), numero (0-9), hyphen ("-"), at underscore ("_").

Higit pang mga halimbawa

Halimbawa 2

Magdagdag ng maraming klase sa isang HTML elemento:

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

ทดลองด้วยตัวเอง

Halimbawa 3

Gamit ang JavaScript, magdagdag ng dilaw na kulay ng background sa unang elemento na may 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
สนับสนุน สนับสนุน สนับสนุน สนับสนุน สนับสนุน