HTML class 属性

定义和用法

class 属性规定元素的类名（classname）。

class 属性主要时候用于指向样式表中的类（class）。不过，也可以利用它通过 JavaScript（HTML DOM）来改变带有指定 class 的 HTML 元素。

ਹੋਰ ਦੇਖੋ:

ਹੈਲਟੀਮ ਸਿਖਲਾਈ:HTML ਪ੍ਰਤੀਯੋਗਿਤਾ

ਸੀਐੱਸਐੱਸ ਸਿਖਲਾਈ:CSS ਗਰੰਥ

ਸੀਐੱਸਐੱਸ ਸੰਦਰਭ ਮੁੱਲਾਂਕਰਣ:CSS .class ਚੋਣਕਾਰ

ਹੈਲਟੀਮ DOM ਸੰਦਰਭ ਮੁੱਲਾਂਕਰਣ:ਹੈਲਟੀਮ DOM getElementsByClassName() ਮੱਥਦਾ

ਹੈਲਟੀਮ DOM ਸੰਦਰਭ ਮੁੱਲਾਂਕਰਣ:ਹੈਲਟੀਮ DOM className ਸਬੰਧੀ ਵਰਗ

ਹੈਲਟੀਮ DOM ਸੰਦਰਭ ਮੁੱਲਾਂਕਰਣ:ਹੈਲਟੀਮ DOM classList ਸਬੰਧੀ ਵਰਗ

ਹੈਲਟੀਮ DOM ਸੰਦਰਭ ਮੁੱਲਾਂਕਰਣ:HTML DOM Style ਆਬਜਦ

ਉਦਾਹਰਣ

ਉਦਾਹਰਣ 1

ਹੈਲਟੀਮ ਦਸਤਾਵੇਜ਼ ਵਿੱਚ class ਸਬੰਧੀ ਵਰਗ ਵਰਤੋਂ ਕਰੋ:

<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">ਧਿਆਨ ਦਿਓ, ਇਹ ਇੱਕ ਮਹੱਤਵਪੂਰਨ ਪੈਰਾਗ੍ਰਾਫ ਹੈ。:）</p>
</body>
</html>

ਸਵੈ ਲੈਗਾਉਣ ਲਈ

ਪੰਨੇ ਤਹਿਤ ਹੋਰ ਉਦਾਹਰਣ ਮਿਲਣਗੇ。

ਗਰੰਥ

<element class="classname">

ਸੰਬੰਧਿਤ ਮੁੱਲ

ਮੁੱਲ ਵਰਣਨ
classname

ਇਲੈਕਟ੍ਰੌਨ ਨੂੰ ਇੱਕ ਜਾਂ ਕਈ ਵਰਗ ਜੋੜੋ。

ਜੇਕਰ ਕਈ ਵਰਗ ਜੋੜਨਾ ਹੈ ਤਾਂ ਵਰਗ ਨਾਮ ਦਰਮਿਆਨ ਸਪੇਸ ਜੋੜੋ。

ਇਹ ਇਹ ਮਦਦ ਨਾਲ ਇੱਕ ਹੈਲਟੀਮ ਇਲੈਕਟ੍ਰੌਨ ਨੂੰ ਕਈ ਸੀਐੱਸਐੱਸ ਵਰਗ ਜੋੜਨ ਦੀ ਇਜਾਜਤ ਦਿੰਦਾ ਹੈ。

ਉਦਾਹਰਣ:<span class="left important">

ਨਾਮਕਰਣ ਨਿਯਮ:

  • ਇਹ ਹਾਂਫਾ ਨਾਲ ਸ਼ੁਰੂ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ A-Z ਜਾਂ a-z
  • ਇਹ ਲਿਖਤਾਂ ਨਾਲ ਅੱਗੇ ਚਲ ਸਕਦੀਆਂ ਹਨ: ਅੱਖਰ (A-Za-z)、ਸੰਖਿਆ (0-9)、ਮਿਲੀਆਂ ("-") ਅਤੇ ਅੰਡਰਲਾਈਨ ("_")

ਹੋਰ ਉਦਾਹਰਣ

ਉਦਾਹਰਣ 2

ਹੈਲਟੀਮ ਇਲੈਕਟ੍ਰੌਨ ਨੂੰ ਕਈ ਵਰਗ ਜੋੜੋ:

<!DOCTYPE html>
<html>
<head>
<style>
h1.intro {
  color: blue;
  text-align: center;
}
.important {
  background-color: yellow;
}
</style>
</head>
<body>
<h1 class="intro important">ਸਿਰਲੇਖ 1</h1>
<p>ਇੱਕ ਪੈਰਾਗ੍ਰਾਫ。</p>
</body>
</html>

ਸਵੈ ਲੈਗਾਉਣ ਲਈ

ਉਦਾਹਰਣ 3

ਜਿਊਸਕਰਿਪਟ ਦੀ ਮਦਦ ਨਾਲ ਪਹਿਲੇ class="example" ਇਲੈਕਟ੍ਰੌਨ (ਅੰਕਾ 0) ਨੂੰ ਪੈਲੇ ਰੰਗ ਦਾ ਪਿੱਟਰ ਜੋੜੋ。

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

ਸਵੈ ਲੈਗਾਉਣ ਲਈ

ਉਦਾਹਰਣ 4

JavaScript ਦੀ ਵਰਤੋਂ ਨਾਲ "mystyle" ਵਰਗ ਨੂੰ id ਲਈ "myDIV" ਐਲੀਮੈਂਟ ਵਿੱਚ ਜੋੜੋ:

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

ਸਵੈ ਲੈਗਾਉਣ ਲਈ

ਬਰਾਉਜ਼ਰ ਸਮਰਥਨ

ਚਰਮੋਗਰੇਨ ਐਜ਼ ਫਾਇਰਫਾਕਸ ਸਫਾਰੀ ਓਪੇਰਾ
ਚਰਮੋਗਰੇਨ ਐਜ਼ ਫਾਇਰਫਾਕਸ ਸਫਾਰੀ ਓਪੇਰਾ
ਸਮਰਥਨ ਸਮਰਥਨ ਸਮਰਥਨ ਸਮਰਥਨ ਸਮਰਥਨ